结合flexbox无法工作的文本溢出[重复]

Question

我有一个300像素宽的容器，里面有两个弯曲的div
第二个是100px宽，另一个应该占用剩余空间
当我在第一个div中放置比剩余200px宽的文本时，它会溢出，我可以使用溢出：隐藏和文本溢出：省略号添加 当文本溢出时
当我在第一个div中放置h1标记并添加溢出和文本溢出时，应该会产生相同的效果<确实如此（在Chrome中），但在IE和Firefox中，div变大了，省略号不起作用
当我删除附加的h1层并相应地更新css时，所描述的行为会按预期工作。

或者看看我的手指

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;
}

html prettyprint-override"><div id="container">
    <div id="content">
        <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1<h1>
    </div>
    <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>




Answer 1

这里的问题是内容div，显示：块；属性似乎消除了IE中flex显示的效果，当我将其更改为显示：flex；时，它起作用了。

内容似乎也相对于主体被溢出，主体也在显示： flex由于flex-base： 300px；在容器中，相对于#Content元素的h1元素没有被溢出，这就是省略号不起作用的原因。

似乎在firefox版本29.0上工作，请注意，flex行为从firefox 28开始完全支持，

查看http://caniuse.com/#feat=flexbox了解更多信息

Answer 2

添加以下内容：

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