Text overflow: ellipse calls a flex item to overflow a flexible container

Question

I have two columns inside a flex container. One of the columns (orange) contains an avatar, and its width should be exactly 10% of the container.

The other column (blue) contains the panel, and the panel title can be very long, so I have to truncate it via css. This figure shows what I expect:

What I expect:

But when I try to do text-overflow: ellipsis , my second line gets wider than the flex container. Here is an example of this behavior:

https://jsfiddle.net/8krtL9ev/1/

 .container { background: #ddd; width: 400px; height: 200px; padding: 10px; display: flex; } .row1 { background: red; flex-basis: 10%; flex-shrink: 0; } .row2 { background: blue; flex-basis: 90%; margin-left: 10px; padding: 10px; display: flex; } .panel { background: green; flex-basis: 50%; overflow: hidden; } .panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div class="container"> <div class="row1"> </div> <div class="row2"> <div class="panel"> <div class="panel-title"> <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> </div> </div> </div> </div> 

How can I solve this problem?

Answer 1

Use width instead of flex-basis . Because in this documentation they mentioned

9.9.3. Flex Dimension Elements

The main contribution of the min-content / max-content element of the flexible element is its external minimum content / maximum content size, clamped by its base size as a maximum (if it does not grow) and / or as a minimum (if it is not a shrink), and then additionally clamped its minimum / maximum property size.

Remember to set calc(90% - 30px) width calc(90% - 30px) as row2 width

 .container { background: #ddd; width: 400px; height: 200px; padding: 10px; display: flex; } .row1 { background: red; /* flex-basis: 10%; */ width: 10%; flex-shrink: 0; } .row2 { background: blue; /* flex-basis: 90%; */ width: calc(90% - 30px); margin-left: 10px; padding: 10px; display: flex; } .panel { background: green; flex-basis: 50%; overflow: hidden; } .panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div class="container"> <div class="row1"> </div> <div class="row2"> <div class="panel"> <div class="panel-title"> <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> </div> </div> </div> </div>