如何让左侧div高度贴合内容，不随父容器内右侧固定高度div影响

我明白你的需求啦——你想让左侧的.left区块高度只匹配自身文本内容，而不是被右侧固定高度的.right区块拉成一样高。问题出在Flex布局的默认行为上：当你使用display: flex时，子元素的align-items默认值是stretch，这会让所有子元素拉伸到和容器内最高元素一样的高度，所以你的.left就被.right的200px高度带偏了。

这里有几个简单的解决方法，你可以根据自己的需求选择：

方法1：修改父容器的align-items属性 #

给.flex-row添加align-items: flex-start，这样所有子元素都会沿着垂直方向的起始位置对齐，不会被强制拉伸：

.parent { display: flex; flex-direction: column; }
.flex-row{ 
  display: flex; 
  flex-direction: row; 
  align-items: flex-start; /* 新增这一行 */
}
.left, .right { flex-basis: 50%; }
.left { border: 1px solid blue; }
.right { background: red; min-height: 200px; width: 200px; }

方法2：单独给.left设置align-self #

如果不想影响父容器里的其他元素，可以只给.left设置align-self: flex-start，它会单独覆盖父容器的align-items默认设置：

.left { 
  border: 1px solid blue; 
  align-self: flex-start; /* 新增这一行 */
}

修改后你的HTML结构完全不需要调整，.left的高度就会自动匹配里面的文本高度，不会再和.right保持一致了。

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