如何在动态大小的 div 容器中使用“溢出：滚动”？答案

【问题标题】：How to use 'overflow: scroll' with a dynamically sized div container?如何在动态大小的 div 容器中使用“溢出：滚动”？
【发布时间】：2019-02-27 14:51:09
【问题描述】：

我想将一个大的内容<div> 放入一个可滚动的容器<div style='overflow: scroll'>。容器应保持其父级的宽度（在下例中占据左侧面板），如果其内容过大，则显示滚动条。

我无法在容器<div> 上设置width/max-width，因为它需要在其父级调整大小时调整大小（例如，当用户调整窗口大小时）。但是现在容器<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>

【问题讨论】：

标签： html css layout overflow

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您不能在容器上设置width/max-width，我猜您仍然可以将max-width 设置为container 的parent(left-panel)。如果是，您可以在将max-width 设置为左侧面板后尝试在container 上设置max-height:inherit。

    <html>
    <body style="display: flex">


  <!-- left panel -->
  <div style="flex: 2; max-height:100px">
    <!-- scrollable container, no effect -->
  	<div style="overflow: scroll;max-height:inherit;">
            <!-- big child content div -->
            <div style="width: 800px; height: 200px; background: red"></div>
        </div>
  </div>

  <!-- vertical divider -->
  <div style="width: 1px; background: blue">

  <!-- right panel -->
  <div style="flex: 3">
    right panel content
  </div>


<script type="text/javascript">
    
</script>

</div><div class="as-console-wrapper"><div class="as-console"></div></div></body>
    </html>

【讨论】：