2

I'm experimenting with flexbox and I ran into this issue.

It looks like a flexbox item where its text wraps to a new line, occupies more width than it should.

See example: https://jsfiddle.net/go20sq1u/1/

<div class="flex-container">
  <div>Some Text Online</div>
  <div>This longtext wrapsline</div>
  <div>Short 1</div>
  <div>Short 2</div>
  <div>Normal</div>
</div>

Why are elements "This longtext wrapsline" and "Some Text Online" seemingly occupying more width than they need? Therefore taking away space that "Short 1" and "Short 2" could probably use instead.

Shouldn't the container of "This longtext wrapsline" and "Some Text Online" shrink to the width of the longest word? Instead, it is much larger than the longest word as you can see.

Why is the extra space there? And what does the amount of space depend from? As in, how is that extra space calculated, what is it based on?

Is there any explanation for this? Or any workaround?

Thanks for the insight!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
andybadwool
  • 59
  • 1
  • 8
  • @Michael Benjamin May you clarify why is the extra space there? And what does the amount of space depend from? As in, how is that extra space calculated, what is it based on? Thanks! – andybadwool May 26 '20 at 18:08
  • It's explained in the duplicate. – Michael Benjamin May 26 '20 at 18:09
  • @MichaelBenjamin Thanks, i did read that, though having trouble understanding this: "The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there." What do you mean by "the length expected to be there"? Based on what? Also what I'm wondering is more why the size of the single element is wrong (not the total size of the container)? Thanks again for the clarification! – andybadwool May 26 '20 at 18:14
  • I think I found a good explanation here in this comment: https://stackoverflow.com/a/12377883/2192944 "A browser will try to flow your text inline within the box until it reaches its maximum allowed width of 250px, then wrap to the next and subsequent lines any text that cannot fit on the first line" Though we gotta still find it weird that it happens with flexbox, as it doesn't have a fixed max-width and it's meant to "flex"... go figure! :) – andybadwool May 26 '20 at 18:19

0 Answers0