Capability to handle growing text without use of flex-CodePudding

I am following MSDN document's look and feel to display text inside a box which has the capability of expanding and shrinking . I have achieved this using flex and have not given any fixed widths to any divs.

Below is a simple working solution . Here the innermost texts inside body can grow/shrink and the parent divs adjust accordingly. Similar to Text1,Text2 I can dynamically have Text3,Text4 etc . The image and first text are in line and subsequent texts will be placed one below the other and this behaviour is dynamic

Since the usage of flex is not supported in older versions of IE , how can I achieve the same thing using older style of css? I am not able to achieve a)Handle growing text b)Handle number of Text items(Text1,Text2,Text3) without using flex as I dont want to fix the width of divs c)Solution should be responsive

Working solution:

<!DOCTYPE html>
<html>

<div style="padding:19px 21px 17px;border:solid 1px #b3a188;background-color:#fff;">
  <span style="display:block;margin 0 244px 19px 0;font-family:Arial;font-size:18px;font-weight:bold;font-stretch:normal;font-style:normal;line-heightnormal;letter-spacing:normal;color:#b3a188;">Header1</span>
  <div style="display:flex;flex-flow:row nowrap;flex:1 0 auto;width:100%">
    <div style="background-color:#1175b5;border:1px solid #1175b5;border-left-width:2px;border-right-width:2px"></div>

    <div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;display:flex;flex:1;width:100%;box-sizing:border-box;justify-content:space-evenly;">
      <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

      <div style="display:flex;flex-flow:column nowrap;flex:1 0 auto;box-sizing:border-box;
    word-break:break-word;width:95%;">
        <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
          Body1</div>
        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
        </div>

        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
        </div>
      </div>
    </div>
  </div>
</div>

</html>

CodePudding user response：

The flex parts were not really needed at all... There was no use for them. The only thing that was using the flexbox feature was an empty div to create a border on the left of the section. I added the border directly instead.

<div style="padding:19px 21px 17px;border:solid 1px #b3a188;background-color:#fff;">
  <span style="display:block;margin 0 244px 19px 0;font-family:Arial;font-size:18px;font-weight:bold;font-stretch:normal;font-style:normal;line-heightnormal;letter-spacing:normal;color:#b3a188;">Header1</span>
  <div style="width:100%;border:1px solid #1175b5;border-width:0 0 0 4px;">

    <div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;width:100%;box-sizing:border-box;justify-content:space-evenly;">
      <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

      <div style="box-sizing:border-box;
    word-break:break-word;width:95%;">
        <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
          Body1</div>
        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
        </div>

        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Header1

<div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;display:flex;flex:1;width:100%;box-sizing:border-box;justify-content:space-evenly;">
  <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

  <div style="display:flex;flex-flow:column nowrap;flex:1 0 auto;box-sizing:border-box;
word-break:break-word;width:95%;">
    <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
      Body1</div>
    <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
      Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
    </div>

    <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
      Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
    </div>
  </div>
</div>