我有這個代碼：
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）
我還想說我使用 flex 布局#container 只是為了#remaining占用所有剩余空間，如果display: flex被洗掉，它仍然可以與我擁有的完整代碼一起使用。
uj5u.com熱心網友回復：
如果您放棄flex:grow并改為計算remainingcss中的寬度，它會起作用。
.remaining{
width: calc(100% - 200px);
overflow-x: auto;
}
用小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/474265.html
上一篇：使用HTML、CSS和JavaScript在頁面重繪時保持選定的主題
下一篇：CSS按鈕未正確顯示