我有 3 个元素,其中 2 个外部元素应占据尽可能多的空间,而中央元素则应拉伸并占据所有剩余空间。它包含另一个元素列表,如果这些元素超出边界,那么它们应该滚动,但它们只是超出整个页面的边界,为其添加水平滚动(在本例中,它们被压缩)。
同时,外部元素的大小无法轻易确定,因此手动计算它们的大小不是一个选择,这就是为什么max-width: calc(...)
不再需要(尽管通过js可能可以)
.list {
display: flex;
flex-direction: row;
gap: 0.5em;
margin-bottom: 3em;
}
.const {
}
.stretch {
align-self: stretch;
flex-grow: 1;
overflow-x: scroll;
background-color: rgb(230, 230, 230);
}
.el {
width: 2em;
height: 2em;
background-color: rgb(100, 100, 100);
}
.stretch .el {
background-color: rgb(100, 100, 200);
}
<div class='list'>
<div class='const'>
<div class='el'></div>
</div>
<div class='stretch list'>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
</div>
<div class='const'>
<div class='el'></div>
</div>
</div>
<div class='list'>
<div class='const'>
<div class='el'></div>
</div>
<div class='stretch list'>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
<div class='el'></div>
</div>
<div class='const'>
<div class='el'></div>
</div>
</div>
UPD:我尝试为stretch
元素添加包装器,并将元素本身的宽度设置stretch
为 100%。但是当元素扩展时,它仍然会以某种方式扩展包装器,尽管它的宽度等于包装器的宽度,不多也不少......