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

我有一个300像素宽的容器，里面有两个弯曲的div。
第二个是100px宽，另一个应该占用剩余的空间。
当我在第一个div中放置比剩余200px宽的文本时，它会溢出，我可以使用

溢出：隐藏
和
文本溢出：省略号
在文本溢出时添加
…
。

当我在第一个div中放置
h1
标记并添加
溢出
和
文本溢出
时，应该会产生相同的效果。

确实如此（在Chrome中），但在IE和Firefox中，div变大，省略号不起作用。

当我删除额外的
h1
层并相应地更新css时，所描述的行为会按预期工作

或者看看我的


正文{
显示器：flex；
}
#容器{
显示器：flex；
弹性基准：300px；
溢出：隐藏；
}
#内容{
显示：块；
高度：300px；
背景色：红色；
柔性生长：1；
弹性收缩：1；
}
h1，h2{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
#菜单{
显示器：flex；
flex-grow:0；
高度：300px；
背景颜色：蓝色；
弹性收缩：0；
}

校长1校长1校长1校长1校长1校长1校长1校长1校长1校长1校长
xCVCxVCVxCVZxCzxCzGD
您的问题在于content div，即display:block；属性似乎消除了IE中flex显示的影响，当我将其更改为display:flex；成功了

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

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

查看更多信息

添加以下内容：

#内容{
最小宽度：0；
}


正文{
显示器：flex；
}
#容器{
显示器：flex；
弹性基准：300px；
溢出：隐藏；
}
#内容{
显示：块；
高度：300px；
背景色：红色；
柔性生长：1；
弹性收缩：1；
最小宽度：0；
}
h1，h2{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
#菜单{
显示器：flex；
flex-grow:0；
高度：300px；
背景颜色：蓝色；
弹性收缩：0；
}

校长1校长1校长1校长1校长1校长1校长1校长1校长1校长1校长
xCVCxVCVxCVZxCzxCzGD
在我的chrome浏览器中，它是并排的，但在ie浏览器中，它超出了顶部。你认为这与问题有关吗？你解决了吗？实际上，它并没有超出顶部。在FF和IE中，蓝色条实际上是0px宽的。省略号不起作用，因为h1实际上没有溢出，容器溢出（溢出隐藏）。只有Chrome符合容器的set flex basis和菜单的flex grow。FF和IE收缩菜单，而不考虑flex shrink:0
为什么不在%中设置宽度？如果这对您有效，请记住使用clearfix进行浮动elements@Enrico谢谢你的提琴，但是我被禁止使用花车（要求）。此外，我不使用百分比，因为在我的完整应用程序中，菜单是一个固定的px，内容应采用剩余宽度。感谢您的回答，这解决了IE中的问题。但是，此修复无法解决FF的问题。我正在运行38.0.5，因此这似乎是在两者之间引入的。奇怪…嗯，这很奇怪：谢谢你引用W3。这消除了官方消息来源的混乱。