文本溢出与flexbox组合不起作用

Question

我有一个300px宽的容器,里面有两个弯曲的div.
第二个是100px宽,另一个应占用剩余空间.
当我在第一个div中放置比剩余的200px更宽的文本时,它会溢出并且我可以使用overflow: hidden和text-overflow: ellipsis添加...文本溢出的时间.
当我h1在第一个div中放置一个标签并添加时overflow,text-overflow应该创建相同的效果.
它确实(在Chrome中),但在IE和Firefox中,div变大,省略号不起作用.
当我删除附加h1层并相应地更新css时,所描述的行为按预期工作.

或者看看我的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>

Answer 1

添加这个:

#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>

您需要它,因为Flexbox模块更改了初始值min-width:

4.5隐含的最小Flex项目大小

为了为flex项提供更合理的默认最小大小,此规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值.