具有两个等高子项的 Flexbox 布局，其中一个包含带有滚动内容的嵌套 Flexbox [英] Flexbox layout with two equal height children, one containing nested flexbox with scrolling content

问题描述

我有一个 <img>，它的右侧有一个面板，其中包含一个控件标题和一长串项目.所以我有一个嵌套的 flexbox 情况:

.container (flex)->.child img->.child 控制面板 (flex)->.controls->.content-wrapper 滚动列表

在非常基本的层面上，两个并排的面板很容易，使用 align-items:stretch 成为一个简单的 flex .. https://codepen.io/neekfenwick/pen/MOxYxz

在那个基本层面，这是一个重复的问题 如何让两个并排的 div 保持相同的高度?.

一旦右侧的面板因垂直滚动列表而变得更加复杂，我无法看到如何使其父级的高度，即第二个 .child 的高度与第一个 的高度匹配>.child.https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+||控制 ||左子 |||+--------------+||A|||垂直 |+||滚动 ||||项目 |||||+||V|+--------------+--------------+

我已阅读具有可滚动内容的 Flexbox 项目，但这解决了水平滚动问题，不是这样的垂直布局.另外 带滚动区域的嵌套 flexbox 处理垂直堆叠的嵌套 flexbox，我认为这种组合row 和 column 方向混淆了我的情况.

作为代码片段:

.container {显示:弹性；对齐项目:拉伸；}.孩子 {边框:1px 纯灰色；背景颜色:浅灰色；弹性:1 1 自动；}.控制面板{显示:弹性；弹性方向:列；}.controls {弹性:0 0 自动；}.content-wrapper {弹性:1 1 自动；宽度:400px；溢出-y:自动；}.content-item {显示:内联块；宽度:100px；高度:100px；背景颜色:红色；}

<div class="child"><p>在现实生活中，我是一个内嵌的 img.</p><p>我有点内容呲牙咧嘴.</p><p>我有点内容呲牙咧嘴.</p><p>我有点内容呲牙咧嘴.</p><p>我希望我的兄弟姐妹和我一样高.</p>
<div class="子控件面板"><div class="控件"><p>小控制区域.下面的面板应垂直滚动.</p>

<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>

我不想在这里固定任何元素的高度.碰巧，我知道 img 的高度，所以我可以使用 CSS 来强制右侧元素的高度，但我想知道是否有一种真正的"flexbox 方法可以解决这个问题.

解决方案

一般来说，对于 overflow: scroll(或 auto 和 hidden) 工作，需要以一种或另一种方式进行高度约束，否则元素通常会根据需要增长以适应其内容.

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

堆栈片段 1

.container {显示:弹性；高度:100vh；}.孩子 {边框:1px 纯灰色；背景颜色:浅灰色；弹性:1 1 自动；}.控制面板{显示:弹性；弹性方向:列；}.controls {弹性:0 0 自动；}.content-wrapper {弹性:1 1 自动；宽度:400px；溢出-y:自动；}.content-item {显示:内联块；宽度:100px；高度:100px；背景颜色:红色；}

<div class="child"><p>在现实生活中，我是一个内嵌的 img.</p><p>我有点内容呲牙咧嘴.</p><p>我有点内容呲牙咧嘴.</p><p>我有点内容呲牙咧嘴.</p><p>我希望我的兄弟姐妹和我一样高.</p>
<div class="子控件面板"><div class="控件"><p>小控制区域.下面的面板应垂直滚动.</p>

<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>