Question

我想将大量内容<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>

Answer 1

要向可滚动容器和父（左面板）容器添加height: 100%, width: 100%;。当以％给出时，它将根据父级动态调整大小，并且overflow属性也将起作用。

Answer 2

如果您无法在容器上设置width/max-width，我想您仍然可以将max-width设置为parent的{{1}}（左面板）。如果是，则可以在将container设置为左面板后尝试在max-height:inherit上设置container。

max-width

如何在动态尺寸的div容器中使用“溢出：滚动”？

2 个答案: