html - 如何将 'overflow: scroll' 与动态大小的 div 容器一起使用？-6ren

html - 如何将 'overflow: scroll' 与动态大小的 div 容器一起使用？

转载作者：行者123 更新时间：2023-11-28 00:20:19

我想放一个大内容<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>