Flex容器中如何让子div高度自动适配相邻动态内容div的高度

该需求完全可以通过Flexbox原生实现，仅需调整1行CSS配置即可达到效果。

问题原因 #

你当前代码中给flex容器#wrapper设置了align-items: flex-start，该属性会强制所有flex子项顶部对齐，且高度由自身内容决定，因此div1无法跟随动态变化的div2高度同步拉伸。

修复方案 #

Flex布局align-items属性的默认值为stretch，会自动将所有子项拉伸至和最高子项相同的高度，你只需删除#wrapper中的align-items: flex-start配置即可，也可显式设置为align-items: stretch。

修改后的完整CSS代码如下：

#wrapper {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    /* 原align-items: flex-start已删除，默认stretch效果生效 */
}

#div1 {
    background-color: mediumblue;
    width: 20px;
    color: mediumblue;
}

.yellowDiv {
  background-color: yellow;
  border: solid 2px;
  height: 100px;
}

溢出场景适配 #

针对div2内容溢出的场景，可根据你的需求选择对应适配方案：

• 若需要div2超过指定高度时内部滚动，且div1和div2的可视高度保持一致：给#div2添加max-height: 自定义高度阈值; overflow: auto;即可，div1会自动匹配div2的可视高度。
• 若需要div1和div2的实际内容总高度完全同步，滚动条展示在整个容器外层：给#wrapper添加max-height: 自定义高度阈值; overflow: auto;即可。

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