我有这样的代码:
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，它仍然可以使用我拥有的完整代码。
如果你放弃flex:grow，而是在css中计算remaining的宽度，它就会起作用。
.remaining{
width: calc(100% - 200px);
overflow-x: auto;
}
用小提琴