如何通过Flexbox让右侧列控制左侧列高度，且左侧内容可滚动？

要实现这个需求，核心是让Flex容器的高度由右侧列的内容来决定，同时让左侧列填满这个高度，超出部分自动滚动。我们只需要对原代码做几处关键修改：

修改后的完整代码 #

.container {
  width: 100%;
  display: flex;
  background-color: #003D5656;
}

.piloted {
  flex: 33;
  background-color: #E6E6E6;
  height: 100%;
  overflow-y: auto;
}

.pilote {
  flex: 77;
  background-color: #30AD63;
}

<div class="container">
  <div class="piloted">
    <p>I</p>
    <p>want</p>
    <p>to</p>
    <p>be</p>
    <p>piloted</p>
    <p>by</p>
    <p>the</p>
    <p>second</p>
    <p>column</p>
  </div>
  <div class="pilote">
    <p>I</p>
    <p>am</p>
    <p>the</p>
    <p>pilot</p>
  </div>
</div>

关键修改说明 #

• 移除容器的height:100%：原来的设置会让容器强制占满父元素高度，现在去掉后，容器的高度会由右侧.pilote列的内容高度来决定（右侧列高度完全由内部<p>标签撑起来）。
• 给左侧.piloted列添加height:100%：让左侧列的高度和Flex容器的高度（也就是右侧列的高度）完全一致，不会因为自身内容多而撑开容器。
• 保留overflow-y: auto：当左侧内容高度超过容器高度时，自动显示垂直滚动条，保证内容可以正常浏览。

这样修改后，右侧列的高度就是整个容器的高度基准，左侧列会严格匹配这个高度，超出内容可滚动浏览。

内容的提问来源于stack exchange，提问作者Toto NaBendo