I have a component which consists of text next to a button. The text must shrink and get cut off if not enough space is available. Like this:
.container .box { background-color: #efefef; padding: 5px; border: 1px solid #666666; flex: 0 0 auto; } .container .text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container { display: flex; }
<div class="container"> <div class="text">This is a text that is supposed to get truncated properly when needed.</div> <div class="box">Hello</div> </div>
Important: To see it working, maximize the snippet and shrink the browser window in order to see the text truncate.
And it works fine as you can see.
The problem comes when I try to put this component inside another flex container.
My page consists of a side area, fixed, and the remaining part on the right which adjust to the space remaining. My component must fit into this second part, so I put it there:
.container .box { background-color: #efefef; padding: 5px; border: 1px solid #666666; flex: 0 0 auto; } .container .text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container { display: flex; } .main { display: flex; } .main .side { width: 100px; background-color: #ff9900; flex: 0 0 auto; } .main .content { flex: 1 1 auto; }
<div class="main"> <div class="side"></div> <div class="content"> <div class="container"> <div class="text">This is a text that is supposed to get truncated properly when needed.</div> <div class="box">Hello</div> </div> </div> </div>
In the second case, the text does not shrink. I am using Chrome but it looks like a problem also in other browsers.
Add min-width: 0
to the outer flex item ( .content
/ demo )
or
Add overflow: hidden
to the outer flex item ( .content
/ demo )
An initial setting of a flex container is min-width: auto
on flex items.
This means that a flex item cannot be smaller than the size of its content .
In your original code, the text box (a flex item) gets smaller due to overflow: hidden
.
Without that rule, you'll have the same behavior as the second example.
Demo: When overflow: hidden
is removed, first example behaves like second example .
In the second version of your code, the primary flex items are .side
and .content
.
By default, .content
cannot be shorter than its content (regardless of flex-shrink
)... until you override min-width: auto
with min-width: 0
or, like the first example, apply overflow: hidden
.
From the spec:
4.5. Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new
auto
value as the initial value of themin-width
andmin-height
properties defined in CSS 2.1... read more
For another example see: Why doesn't flex item shrink past content size?
Use width
property to work with overflow
Note: Width should be in px
.container .box { background-color: #efefef; padding: 5px; border: 1px solid #666666; flex: 0 0 auto; } .container .text { flex: 1 1 auto; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container { display: flex; } .main { display: flex; } .main .side { width: 100px; background-color: #ff9900; flex: 0 0 auto; } .main .content { flex: 1 1 auto; }
<div class="main"> <div class="side"></div> <div class="content"> <div class="container"> <div class="text">This is a text that is supposed to get truncated properly when ndgsdgeeded.</div> <div class="box">Hello</div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.