如何将滚动条添加到带有滚动条的元素内的元素？

Question

如果一般内容比模态高度长，我已经有一个带有滚动条的模态。但是我需要一个 div 在我的模态里面有它自己的滚动条。我的问题是我不知道模态框的高度，因为它基于 30vh.

如果我可以简单地为我的内部 div 设置一个静态高度，那会更容易，但我不能。

我的问题：我需要为正确的区域创建一个单独的卷轴。

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

这是我在 CodePen 上的例子。

Answer 1

您好，没答对问题。

但这就是你要的吗？

.container {
  max-height: 70vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  flex-size: 1;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

Answer 2

在 块布局 中，您需要固定高度才能使 overflow 属性正常工作。

从 MDN 上的这个声明可以清楚地看出：

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

然而，在 flex 布局 中，这不是一个问题。可以在具有动态高度的容器上触发溢出条件。

因此，将主容器从 display: block（默认）切换到 display: flex.

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  /* new */ display: flex;
  /* new */ flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  /* new */ min-height: 0; /* see note below */
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow: auto;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

jsFiddle demo

注意：您需要覆盖 min-height: auto 默认值，此布局才能在大多数浏览器上工作。这个问题在这里解释：

如何将滚动条添加到带有滚动条的元素内的元素？

How to add a scrollbar to an element inside an element with a scrollbar?

html

css

overflow

flexbox

jsFiddle demo