How does inline-flex container decide when text is wrapped?

Question

I have an issue with text clipping where flex items are clipped too early even though their flex-basis is set to 0 so I would expect the flex container to stretch all items to be at least as big as the biggest item in the container. Anyway here's a fiddle:

https://jsfiddle.net/nxbwufLk/

How is it choosing to wrap the text? Why is it not stretching the first item.

.button {
  flex: 1 1 0;
  border: 1px solid red;
}

.container {
  display: inline-flex;
}

<div class="container">
<div class="button">
  Some text
</div>
<div class="button">
  Some text that is very long indeed
</div>
</div>

I can see that the second text is wrapped but how is that decided? There are no widths set anywhere

is this can help you: https://stackoverflow.com/questions/33137566/why-are-flex-items-not-wrapping — Laaouatni Anas, Jan 02 '22 at 20:33
If you move `flex: 1 1 0;` to the container you'll see what you had expected. While in its current position you're telling the individual blocks to stretch to themselves if that makes sense. — Kat, Jan 02 '22 at 20:57

score 2 · Accepted Answer · answered Jan 02 '22 at 20:59

I can see that the second text is wrapped but how is that decided? There are no widths set anywhere

There is a width set it's just not trivial to notice, You're using inline-flex which on it's own should tell you what's going on.

The width of the container will equal it's content, in this case the width of the text of both elements.

Demo

.button {
  border: 1px solid red;
}

.container {
  display: inline-flex;
}

.test>.button {
  flex: 1 1 0;
}

No flex properties set
<br/>
<div class="container">
  <div class="button">
    Some text
  </div>
  <div class="button">
    Some text that is very long indeed
  </div>
</div>
<br/>
<br/>
<br/> flex properties set
<br/>
<div class="container test">
  <div class="button">
    Some text
  </div>
  <div class="button">
    Some text that is very long indeed
  </div>
</div>

As you can see the width of the containers is the same.

Now regardless of what we do, the width of the container is set and won't change, so when you apply flex: 1 1 0; you're simply dividing that width (evenly flex-basis:0;) between the two elements and then you get the wrapping.

How does inline-flex container decide when text is wrapped?

1 Answers1