flexbox父級小於瀏覽器上的子元素調整大小

請參閱片段...然後調整瀏覽器的大小（寬度方向）使其小於粉紅色框。應該出現滾動條。在頁面上向右滾動並注意綠色背景比粉色區域小，右邊有白色斑點。

這麼幾個問題：

它爲什麼會發生？
如何防止來自與粉紅色的包裝盒/ DIV越來越小，當瀏覽器大小不父設置明確的寬度（或其他地方）或使用overflow:hidden父div的綠色背景？
是否有Flexbox解決方案來解決這個問題？

感謝，

托馬斯

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 

 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

來源

2016-08-13 Thomas

它發生，因爲你的.parent是正常的塊元素（柔性也是塊級容器）並用初始化210，這在你的情況下是視口的寬度。因此，向右滾動將顯示空白區域，因爲您的div的寬度小於整個可滾動區域。
您可以通過將.parent設置爲一個內聯元素來實現，該內聯元素將響應其子節點的寬度。
是的，只需在.parent上使用display: inline-flex;即可。

.parent { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: green; 
 
    display: inline-flex; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

見display property上W3Schools的。

來源

2016-08-13 22:16:45 andreas

我這麼愛你現在:)謝謝。這讓我發瘋。 – Thomas

我想補充一點，內聯-Flex摺疊父級以匹配子級，但是如果您希望父級全寬添加min-width：100％父級。看到http://codepen.io/_thomas/pen/vKbkXZ我試過寬度：100％，它不起作用。 – Thomas

只需將'flex：1;'添加到'.item' - 用'width：100％'更新答案。 – andreas

默認情況下，Flex項目的大小不能小於其內容的大小。因此，雖然父級可以縮小，但彈性項目無法縮小超過文本的長度。這會導致溢出，並因此導致下面的空白欄。

彈性項目的初始設置爲min-width: auto。爲了讓每個物品留在容器內，請切換到min-width: 0。

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0; /* NEW */ 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

現在的粉紅色框不會溢出容器了。

但是，文本現在已經溢出了粉紅色的框。

的問題並不文本中指定的行爲，但這裏有一個可能的解決方案：

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0;   /* NEW */ 
 
    text-overflow: ellipsis; /* NEW */ 
 
    white-space: nowrap;  /* NEW */ 
 
    overflow: hidden;  /* NEW */  
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

來源

2016-08-13 22:52:52

flexbox父級小於瀏覽器上的子元素調整大小

回答

相關問題