具有两个等高子项的Flexbox布局，其中一个子项包含带有滚动内容的嵌套flexbox

Question

我<img>的面板右侧包含一个控件标题和一长串项目。所以我有一个嵌套的flexbox情况：

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

从最基本的角度来说，两个并排面板很容易，可以通过align-items: stretch..轻松进行操作

一旦右侧面板的垂直滚动列表变得更加复杂，我便看不到如何使其父级（第二个.child）的高度与第一个高度匹配.child。

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已经阅读了[具有可滚动内容的Flexbox项目，但是它解决了水平滚动问题，而不是像这样的垂直布局。此外，带滚动区域嵌套Flexbox的涉及垂直堆叠嵌套flexboxes，我觉得这个组合row与column方向混淆了我的情况。

作为代码段：

.container {

  display: flex;

  align-items: stretch;

}



.child {

  border: 1px solid grey;

  background-color: lightgrey;

  flex: 1 1 auto;

}



.controls-panel {

  display: flex;

  flex-direction: column;

}



.controls {

  flex: 0 0 auto;

}



.content-wrapper {

  flex: 1 1 auto;

  width: 400px;

  overflow-y: auto;

}

.content-item {

  display: inline-block;

  width: 100px;

  height: 100px;

  background-color: red;

}


<div class="container">

  <div class="child">

    <p>In real life I am an inline img.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I want my sibling to equal my height.</p>

  </div>

  <div class="child controls-panel">

    <div class="controls">

      <p>Small controls area. Panel below should scroll vertically.</p>

    </div>

    <div class="content-wrapper">

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

    </div>

  </div>

</div>

我不想在这里固定任何元素的高度。碰巧的是，我知道img的高度，因此我可以使用CSS强制将元素的高度设置在右侧，但是我想知道是否存在解决此问题的“真”Flexbox方法。

Answer 1

通常，为了使overflow:scroll（或auto和hidden）起作用，需要以一种或另一种方式来设置高度限制，否则元素的大小通常会增长到适合其内容的程度。

主要有3种方法，其中一个是设置实际高度，如在第一个示例中一样，我将其添加到container。

堆栈片段1

.container {

  display: flex;

  height: 100vh;

}



.child {

  border: 1px solid grey;

  background-color: lightgrey;

  flex: 1 1 auto;

}



.controls-panel {

  display: flex;

  flex-direction: column;

}



.controls {

  flex: 0 0 auto;

}



.content-wrapper {

  flex: 1 1 auto;

  width: 400px;

  overflow-y: auto;

}

.content-item {

  display: inline-block;

  width: 100px;

  height: 100px;

  background-color: red;

}


<div class="container">

  <div class="child">

    <p>In real life I am an inline img.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I want my sibling to equal my height.</p>

  </div>

  <div class="child controls-panel">

    <div class="controls">

      <p>Small controls area. Panel below should scroll vertically.</p>

    </div>

    <div class="content-wrapper">

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

      <div class="content-item"></div>

    </div>

  </div>

</div>

或使用绝对定位来创建该 高度约束 ，而绝对元素会这样做。

只需使用一个额外的包装器即可完成content-scroll，并使其他结构保持完全动态。

堆栈摘要2

.container {

  display: flex;

}



.child {

  border: 1px solid grey;

  background-color: lightgrey;

  flex: 1 1 auto;

}



.controls-panel {

  display: flex;

  flex-direction: column;

}



.controls {

  flex: 0 0 auto;

}



.content-wrapper {

  position: relative;

  flex: 1 1 auto;

  width: 400px;

}

.content-scroll {

  position: absolute;

  top: 0; left: 0;

  right: 0; bottom: 0;

  overflow-y: auto;

}

.content-item {

  display: inline-block;

  width: 100px;

  height: 100px;

  background-color: red;

}


<div class="container">

  <div class="child">

    <p>In real life I am an inline img.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I want my sibling to equal my height.</p>

  </div>

  <div class="child controls-panel">

    <div class="controls">

      <p>Small controls area. Panel below should scroll vertically.</p>

    </div>

    <div class="content-wrapper">

      <div class="content-scroll">

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

      </div>

    </div>

  </div>

</div>

单独使用Flexbox，以为它可能无法完全跨浏览器运行，特别是对于仍支持它的旧版本，但它的bug很大。

原始代码中的简单修复方法是将flex: 1 1 auto;in 更改.content-wrapper为flex: 1 1 0px;（0px我的IE版本需要使用，Chrome / Firefox / Edge可以使用0）

堆栈摘要3

.container {

  display: flex;

}



.child {

  border: 1px solid grey;

  background-color: lightgrey;

  flex: 1 1 auto;

}



.controls-panel {

  display: flex;

  flex-direction: column;

}



.controls {

  flex: 0 0 auto;

}



.content-wrapper {

  flex: 1 1 0px;

  width: 400px;

  overflow-y: auto;

}

.content-item {

  display: inline-block;

  width: 100px;

  height: 100px;

  background-color: red;

}


<div class="container">

  <div class="child">

    <p>In real life I am an inline img.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I am some content whoop de doo.</p>

    <p>I want my sibling to equal my height.</p>

  </div>

  <div class="child controls-panel">

    <div class="controls">

      <p>Small controls area. Panel below should scroll vertically.</p>

    </div>

    <div class="content-wrapper">

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

        <div class="content-item"></div>

    </div>

  </div>

</div>

片段2和3也会回答您的问题

…通过垂直滚动列表，我看不到如何使其父级（第二个.child）的高度与第一个高度匹配.child。

注意，如果右列中的顶部元素可以大于左列，则底部元素将需要最小高度，以防止其塌陷为0，例如

.content-wrapper {
  ...
  min-height: 200px;           /*  e.g. like this  */
}