如何讓子元素在溢出時水平擴展父元素？

Question

我有一個孩子的父容器。當孩子水平溢出（即比瀏覽器窗口更大）時，它不會影響父母。如果孩子較寬，是否有任何針對父母根據孩子調整寬度的解決方案？

因此，兩者都可能比屏幕寬，我對此表示滿意。 我沒有使用任何UI庫（沒有引導等）如果孩子比屏幕小，都應該調整寬度瀏覽器窗口。

<div style="border: 2px solid red"> 
 
    <div style="border: 2px solid blue; width:2000px">test</div> 
 
</div>

Answer 1

您可以設置外層div的顯示，以inline-block的：

<div style="border: 2px solid red;display:inline-block"> 
 
    <div style="border: 2px solid blue; width:2000px">test</div> 
 
</div>

如果你需要同時擁有充滿整個屏幕時孩子小於屏幕的寬度，那麼都需要最小寬度：100％和箱子大小：邊界R-盒（你可以刪除從父顯示-inline-block的）：

div { 
 
    min-width: 100%; 
 
    box-sizing: border-box; 
 
}

<div style="border: 2px solid red;"> 
 
    <div style="border: 2px solid blue; width:300px">test</div> 
 
</div>

Answer 2

您可以設置display: inline-block父和min-width: 100%雙方父母和孩子。

類似於this。