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

【问题标题】：How to add a scrollbar to an element inside an element with a scrollbar?如何将滚动条添加到带有滚动条的元素内的元素？
【发布时间】：2018-11-09 14:50:15
【问题描述】：

如果一般内容长于模态高度，我已经有一个带有滚动条的模态。但我需要一个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 上的示例。

【问题讨论】：

我不知道你想要这个样子。当 div 大于其高度时会发生滚动，但在这种情况下，您对 rightArea 的高度没有限制。您可以将 rightArea 设置为也有 30vh 的高度限制？但在这种情况下，向下滚动 div 的其余部分会显示 rightArea 太小...例如：codepen.io/anon/pen/mKyBQO?editors=1100#0
谢谢，@Asthmatic，它可以工作，但 30vh 是整个模态的高度。请注意，我有一个 Header （我可以在两者之间有更多的元素）。所以我的 .rightArea 应该小于模态的总高度。你知道我的意思吗？
我的意思是，如果左侧区域太大，您可以滚动整个模式，但只有在右侧区域太大时才滚动右侧区域，您必须设置一个高度构成“太大”的正确区域。
我明白你的意思。如果我找不到任何“完美”的东西，我会采用这种方法。我将减少vh 的数量以更接近我的区域大小。根据标题的大小，我仍然会有一些差距。但它现在有效。谢谢

标签： html css flexbox overflow

【解决方案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>

【讨论】：

我不想为.leftArea设置溢出，它已经被模式设置所支配。抱歉，如果不清楚，那是假设情况。我的目标只是为.rightArea 创建一个卷轴。
codepen.io/anon/pen/rKaGKo?editors=1100 从左侧删除溢出应该可以工作。

【解决方案2】：

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

从MDN 的声明中可以清楚地看出：

为了使overflow 生效，块级容器必须设置高度（height 或max-height）或将white-space 设置为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 默认值，此布局才能在大多数浏览器上运行。问题在这里解释：Why don't flex items shrink past content size?

【讨论】：