当flexbox容器具有指定高度时如何滚动嵌套的flexbox子答案

【问题标题】：How to scroll nested flexbox child when flexbox container has specified height当flexbox容器具有指定高度时如何滚动嵌套的flexbox子
【发布时间】：2019-04-02 08:04:43
【问题描述】：

我正在尝试使嵌套的 flexbox 子 div (child211) 在没有可用空间时显示滚动。 Flexbox 容器具有预定义的高度。 child211 的 Flexbox 父 child2 有溢出：隐藏。我不想滚动整个 child2。

顺便说一句：我只展示了基本结构，因为在我的真实场景中，到最后一个 div 的路径真的很长。

示例 CSS 和 HTML 如下所示：

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.child21 {
  background-color: rgb(20, 255, 0);
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

【问题讨论】：

overflow:auto 而不是 hidden ?
通常，要让overflow 生成垂直滚动，您需要在沿途某处定义height 或max-height（或者，在适当的时候，flex-basis）。 stackoverflow.com/q/52487743/3597276
@TemaniAfif。这将导致整个 div2 滚动，这是我不想要的。
@Michael_B 我尝试在 div211 上设置高度或 flex-basis 但这没有帮助。

标签： css flexbox overflow

【解决方案1】：

使child2 成为具有列方向的弹性容器，并在嵌套的子元素上简单地添加overflow:auto：

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

如果你想在内层滚动，你可以继续嵌套 flex 容器。

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
  display:flex;
  flex-direction:column;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

【讨论】：