如何在 flex-grow 中使用溢出

Question

我有這個代碼：

 html, body, #container { width: 100%; height: 100%; } #container { display: flex; background: #ddd; } #width { width: 200px; height: 100%; resize: horizontal; overflow: hidden; background: #eee; } #remaining { flex-grow: 1; overflow: scroll; } #resize { width: 200px; height: 200px; resize: both; overflow: hidden; background: #ccc; }

 <!DOCTYPE html> <html> <body> <div id="container"> <div id="width">Width</div> <div id="remaining"> <div id="resize">Resize</div> </div> </div> </body> </html>

這是我想要做的：

你可以調整#width
你可以調整#resize

問題是，當我調整#resize大小時，# #width會縮小以為它騰出空間。 我正在尋找的是當我調整大小時， #remaining顯示一個滾動條，並且不會調整其他任何東西的大小。

我相信這是因為#remaining沒有width屬性，而是flex-grow 。 所以它允許它的寬度變化，因為它沒有固定的寬度。

我正在尋找一個純 HTML/CSS 的答案，但 JavaScript 也可以。 （當然，只要它是可靠的，不會中斷，並且不會使用諸如setInterval之類的方法大大減慢執行速度）

我還想說我在#container上使用 flex 布局只是為了讓#remaining占用所有剩余空間，如果display: flex被刪除，它仍然可以使用我的完整代碼有。

Answer 1

如果您放棄flex:grow而是計算remaining在 css 中的寬度，它將起作用。

.remaining{
   width: calc(100% - 200px);
   overflow-x: auto;
}

用小提琴

如何在 flex-grow 中使用溢出

問題描述

1 個解決方案

解決方案1
1 已采納 2022-05-14 13:17:32

如何在 flex-grow 中使用溢出

問題描述

1 個解決方案

解決方案1 1 已采納 2022-05-14 13:17:32

解決方案1
1 已采納 2022-05-14 13:17:32