Flexbox防止利潤受到尊重

Question

我很努力得到一個flexbox佈局，使用邊距和overflow: hidden。

轉盤部件我整合使用此方法來響應，但只要一display:flex被施加到母體，如下面的例子中marginoverflow: hidden和特性將被忽略。

頂部版本不嵌套在Flexbox中，其位置如下，並且不尊重父級的邊距。

的問題表現在下面的代碼，並在此Plunker。 http://plnkr.co/edit/qU1oq1Vq1X3FQMWLJiQk?p=preview

body { 
 
    margin: 400px; 
 
} 
 

 
.overflowHidden { 
 
    overflow: hidden; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
}

<div> 
 
    <div class="overflowHidden"> 
 
    <img src="http://lorempixel.com/600/400" /> 
 
    </div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div> 
 
    <div class="overflowHidden"> 
 
     <img src="http://lorempixel.com/600/400" /> 
 
    </div> 
 
    </div> 
 
</div>

我知道有關於這個主題很多類似的問題，但我找不到關於我的具體使用情況下任何東西。

Answer 1

這裏的解決方案：

.flex > div { overflow: hidden } 

revised demo

---

要注意的第一件事是，利潤率無關這個問題。實際上，保證金是受到尊重的。他們只是隨着擴大容器的元素一起旅行。

---

默認情況下，non-flex div容器有display: block。

在block formatting context中，當圖像變得太大而無法放入容器中時，它會根據預期消失。

母公司和他們的利潤率保持穩定和不受干擾。

但是，在flex formatting context中，行爲是不同的。

首先，您在flex示例中有三個級別的div。您在塊示例中只有兩個。但這並不重要。

這裏關鍵信息是：

當你申請display: flex或display: inline-flex的元素就變成了柔性容器及其孩子變得彎曲的物品。默認情況下，彈性項目不能小於其內容的大小。它們的默認設置爲min-width: auto。

所以，當圖像變得太大了其母公司，母公司（如果它是一個柔性的項目）必須擴大。但在你的例子中，圖像的父母（div.overflowHidden）不是一個flex項目，它是一個標準塊元素。所以overflow: hidden工作正常（就像在塊示例）。

但父母的父母是一個彈性項目。其默認設置是min-width: auto。它不能縮小到其內容的大小（圖像）。因此，儘管塊示例可以始終保留在屏幕上，但flex版本會溢出body /視口，並在其右側留下邊距。

解決方案是覆蓋flex項目上的默認值min-width: auto。您可以使用：

• min-width: 0

OR

• overflow: hidden

更多細節在這裏：Why doesn't flex item shrink past content size?

Answer 2

不知道爲什麼會發生這種情況，但如果將.overflowHidden應用於包裝flex父級的元素，或者將其應用於父級父元素，似乎可行。

body { 
 
    margin: 400px; 
 
    overflow-x: hidden; 
 
} 
 

 
.overflowHidden { 
 
    overflow: hidden; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    z-index: -1; 
 
    position: relative; 
 
}

<div> 
 
    <div class="overflowHidden"> 
 
    <img src="http://lorempixel.com/600/400" /> 
 
    </div> 
 
</div> 
 
<div class="flex overflowHidden"> 
 
    <div> 
 
    <img src="http://lorempixel.com/600/400" /> 
 
    </div> 
 
</div> 
 
<div class="overflowHidden"> 
 
    <div class="flex"> 
 
    <img src="http://lorempixel.com/600/400" /> 
 
    </div> 
 
</div>