html - text-overflow in combination with flexbox not working -
this question has answer here:
i have container 300px wide 2 flexed divs inside.
second 1 100px wide , other should take remaining space.
when place text wider remaining 200px in first div, overflows , can use overflow: hidden , text-overflow: ellipsis add ... when text overflows.
when put h1 tag within first div , add overflow , text-overflow should create same effect.
, (in chrome), in ie , firefox div grows larger , ellipsis doesn't work.
when remove additional h1 layer , update css accordingly, described behavior works expected.
or @ jsfiddle
body{ display: flex; } #container{ display: flex; flex-basis: 300px; overflow: hidden; } #content{ display: block; height: 300px; background-color: red; flex-grow: 1; flex-shrink: 1; } h1, h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #menu{ display: flex; flex-grow: 0; height: 300px; background-color: blue; flex-shrink: 0; }<div id="container"> <div id="content"> <h1>header1 header1 header1 header1 header1 header1 header1<h1> </div> <div id="menu">xcvcxcxvcvxcvzxczxczgd</div> </div>
add this:
#content { min-width: 0; } body{ display: flex; } #container{ display: flex; flex-basis: 300px; overflow: hidden; } #content{ display: block; height: 300px; background-color: red; flex-grow: 1; flex-shrink: 1; min-width: 0; } h1, h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #menu{ display: flex; flex-grow: 0; height: 300px; background-color: blue; flex-shrink: 0; }<div id="container"> <div id="content"> <h1>header1 header1 header1 header1 header1 header1 header1</h1> </div> <div id="menu">xcvcxcxvcvxcvzxczxczgd</div> </div>you need because flexbox module changed initial value of min-width:
4.5 implied minimum size of flex items
to provide more reasonable default minimum size flex items, specification introduces new auto value initial value of min-width , min-height properties defined in css 2.1.
Comments
Post a Comment