0

Here is my code:

<div style="width:50%;display:flex;background-color:aquamarine;justify-content:flex-start;flex-direction:row;">
    <div style="word-break:break-word;display:flex;">112121231231231231233111231123123123123123231231231232312312312312323123123123312312312312323123123123123123123123123123</div>
    <div style="width:40px;background-color:bisque;display:flex;"></div>
    <div style="width:40px;background-color:brown;display:flex;"></div>
</div>


Well, after I ran the code in Chrome Version 77.0.3865.90, it turns out to be this:
enter image description here

As you see, even I set the width of the bisque color div to 40px, it only displays 12.44px yet.

enter image description here


There is not any other CSS set yet.

What's more, I found that if the context doesn't need to wrap, all is OK.

I just want the second and the third div render correctly and the first div wrap automatically.

How can I solve this? Thank you.

102425074
  • 781
  • 1
  • 7
  • 23

1 Answers1

2

Add flex-shrink: 0 on the two elements with width to avoid them being resized.

flex-shrink is 1 per default for all elements, so if the content is too big, every element will be shrinked with the same ratio. By setting flex-shrink: 0, you forbid these elements to be shrinked, so only the first one will be resized.

Joffrey Schmitz
  • 2,393
  • 3
  • 19
  • 28