嵌套的柔性盒divs中没有隐藏溢出

为什么两个嵌套的flexbox div内没有隐藏文本溢出？它在一格内时可以工作。嵌套的柔性盒divs中没有隐藏溢出

特别是：为什么内部div比外部div大？

浏览器：Chrome浏览器52.0.2743.60

这里是一个最小的代码示例：

<style> 
.outer { 
    display: flex; 

    width: 500px; 
    border: 2px solid red; 
} 
.inner { 
    display: flex; 

    border: 2px solid blue; 
} 
.text { 
    overflow: hidden; 
    white-space: nowrap; 
} 
</style> 

<div class="outer"> 
    <div class="inner"> 
    <div class="text"> 
     My overflow should be hidden but it's not aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 
    </div> 
</div>

来源

2016-08-01 user6661680

澄清：对此有一些解决方法，但我想知道_why_它发生。为什么内盒比外盒大？ – user6661680

我相信这是值得做的宽度的外弯曲，但内一个没有，所以这会使浏览器对溢出位置感到困惑。您可以通过应用的宽度，以你的内心或文字的div像这样解决这个问题：

.inner { 
    display: flex; 
    width: 100%; /* or 500px */ 
}

另一种方法是将overflow: hidden移动到外侧弯曲。

来源

2016-08-01 05:04:08 Zenny

嵌套的柔性盒divs中没有隐藏溢出

回答

相关问题