如何使本身是 flex 子级的父级的 flex 子级的最大高度与由其自身的 flex 状态确定的父级高度相同？答案

【问题标题】：How to make the flex children of a parent that is itself a flex child have as max height the height of the parent determined by its own flex status?如何使本身是 flex 子级的父级的 flex 子级的最大高度与由其自身的 flex 状态确定的父级高度相同？
【发布时间】：2019-11-13 05:37:58
【问题描述】：

假设您有一个显示 flex、flex-direction 列的 div，例如本示例的高度为 600。

它有三个孩子，每个孩子的属性 flex 等于 1。前两个孩子渲染一些简单的文本，第三个渲染一个 h1 和一个字符串列表，它也有 display flex 列。这些字符串来自一个字符串数组。

假设我们有一个额外的按钮（不重要），当我们点击它时，它会在字符串数组中添加一个元素。 Here 是刚刚给出的描述的代码框。这是一个通用的 JS 问题，但示例是在一个非常简单的 React 组件中。

最初，所有三个孩子都有相同的大小（200），因为它们都有 flex 1。但是，在单击几次按钮后，第三个孩子的列表变得比第三个孩子的可用空间大，第三个孩子开始膨胀，另外两个孩子缩小。 如何使包含在第三个子项中的列表最初最多分配给它的空间，然后才能溢出滚动？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

只需在该 div 上设置 overscrollY: "scroll"。

Your updated fiddle

【讨论】：

【解决方案2】：

如果您可以设置最小高度，在您的示例中，您将为每个块设置 min-height:200px。然后，随着底部块弯曲，两个顶部块永远不会小于 200px。使其在您的示例中起作用的最后一步是为您的第三个块设置overflow-y:scroll。

示例：https://codesandbox.io/s/crimson-worker-f56zn

【讨论】：

【解决方案3】：

例如尝试将 maxHeight 设置为 85px 并使用 overflowY 来滚动

<ul style={{ flex: 1, maxHeight: "85px", overflowY: "scroll" }}>
            {list.map((el, i) => (
              <li key={i}>el</li>
            ))}
          </ul>

【讨论】：