<分区>
<分区>
我有三个并排的 div。左边的应该占据屏幕的 25%。中间的应该占据固定大小，比方说 50 像素(可能会改变)。第三个应该占据剩余的空间，但不要超过屏幕的大小。当我在上面加载大图像时，它超出了屏幕。我试过 flex: 1 1 auto; 和 flex-shrink: 1; 但都没有用。我希望滚动条出现在 d3 div 上，而不是 body 上。
body {
display: flex;
margin: 0;
width: 100%;
}
#d1 {
background-color: red;
flex: 1 0 auto;
width: 25%;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
flex-shrink: 1;
}
#d3a {
background-color: cyan;
margin: 1em;
width: 1000px;
}<div id='d1'>
1
</div>
<div id='d2'>
2
</div>
<div id='d3'>
<div id='d3a'>
3a
</div>
</div>最佳答案
第一个 child 必须没有 flex，只有宽度(%)。
第二个 child 也没有 flex，并且宽度以 px 为单位(因为您希望它固定)。
最后，第三个 child 将拥有 flex: 1，以占用所有剩余空间。
如果图像使第三个 child 比屏幕宽，请设置 width: 100%。
关于css - 如何使用flex调整三个div占据屏幕的确切宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56711645/