我想放一个大内容<div>在可滚动容器内 <div style='overflow: scroll'> .容器应保持其父级的宽度(在下例中占据左侧面板)，如果内容过大则显示滚动条。
我无法设置 width/max-width在容器上 <div>因为它需要在其父级调整大小时调整大小(例如，当用户调整窗口大小时)。但是现在容器 <div>只是增长以适应其全部内容，并将页面推得比窗口更宽，因此显示了整个页面的滚动条，这不是我想要的。
我希望页面保持窗口的宽度，页面没有滚动条。容器<div>保持其父级(左侧面板)的宽度，并为其内容显示一个滚动条。如何实现？
例子:
<html>
<body style="display: flex">
<!-- left panel -->
<div style="flex: 2">
<!-- scrollable container, no effect -->
<div style="overflow: scroll">
<!-- big child content div -->
<div style="width: 800px; height: 200px; background: red" />
</div>
</div>
<!-- vertical divider -->
<div style="width: 1px; background: blue" />
<!-- right panel -->
<div style="flex: 3">
right panel content
</div>
</body>
</html>最佳答案
向可滚动容器和父(左面板)容器添加 height: 100%, width: 100%;。当以 % 给定时，它将根据父级动态调整大小，溢出属性也将起作用。
关于html - 如何将 'overflow: scroll' 与动态大小的 div 容器一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54899053/