Why automatic line-break of flexbox child increases it's width while using manual
doesn't?

Question

As you can see the element containing "Hello World!" takes up more width in the first example than in the second one. Why is that and how can I make it take the same amount of width as in the second example?

<div style="width: 80px">
    <div style="display:flex;">
      <div style="background: orange">Hello World!</div>
      <div>1</div>
    </div>
  </div>
  
  <br />
  <br />

  
  <div style="width: 80px">
    <div style="display:flex;">
      <div style="background: orange">Hello <br /> World!</div>
      <div>2</div>
    </div>
  </div>

The reason is that a container does not know when a child element wraps, so it doesn't shrink-to-fit. — Michael Benjamin, Jul 21 '17 at 13:24

score 0 · Answer 1 · answered Jul 21 '17 at 13:25

it because you are breaking the line before the given width

you can add border and check

.one, .two {
 border: 1px solid green;
}

<div style="width: 80px" class="one">
    <div style="display:flex;">
      <div style="background: orange">Hello World!</div>
      <div>1</div>
    </div>
  </div>
  
  <br />
  <br />

  
  <div style="width: 80px" class="two">
    <div style="display:flex;">
      <div style="background: orange">Hello <br> World!</div>
      <div>2</div>
    </div>
  </div>

In the second example I'm also breaking the line before the given width and don't get the same effect. — Tomas, Jul 21 '17 at 14:36

Why automatic line-break of flexbox child increases it's width while using manual doesn't?

1 Answers1

Why automatic line-break of flexbox child increases it's width while using manual
doesn't?