text-overflow in combination with flexbox not work

问题:

This question already has an answer here:

• How can I get FF 33.x Flexbox behavior in FF 34.x? 2 answers

I have a container which is 300px wide with two flexed divs inside.
The second one is 100px wide and the other should take up the remaining space.
When I place text wider than the remaining 200px in the first div, it overflows and I can use overflow: hidden and text-overflow: ellipsis to add the ... when the text overflows.
When I put a h1 tag within the first div and add the overflow and text-overflow should create the same effect.
And it does (in Chrome), but in IE and Firefox the div grows larger and the ellipsis doesn't work.
When I remove the additional h1 layer and update the css accordingly, the described behavior works as expected.

Or look at my 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>

回答1:

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 it because the Flexbox module changed the initial value of min-width:

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 the min-width and min-height properties defined in CSS 2.1.

回答2:

Your problem here is with the content div, the display: block; property seems to be eliminating the effect of flex display in IE, when I changed it to display: flex; it worked.

It seems also that the content is getting overflown relative to the body which is also in display:flex due to the flex-basis: 300px; in the container, and the h1 element relative to the #content element is not being overflown that's why the ellipsis doesn't work.

Seems to work on firefox version 29.0, please note that the flex behavior is fully suuported starting from firefox 28+,

check http://caniuse.com/#feat=flexbox for more info