Flex 布局：父元素高度对子元素布局的影响及解决方案

本文探讨Flex布局中，父元素高度如何影响子元素布局，以及如何解决由此产生的问题。

示例中，父元素.parent设置为Flex布局，并定义了宽度和高度。初始状态下，Flex方向为水平(row)，子元素.left和.right按预期水平排列。

问题：

当父元素.parent的Flex方向改为垂直(column)时，子元素.left的高度显示异常，超出父元素高度。这是因为Flex方向改变后，子元素的排列规则发生变化。

解决方案：

除了将.left的flex属性设置为0 1 auto，还可以通过调整flex属性和max-height属性来解决：

.parent {
  display: flex;
  width: 500px;
  height: 500px;
  flex-direction: column; /* 将方向改为垂直 */
  background: #fff;
}

.left {
  flex: 0 0 50%; /* 设置 flex-basis 为 50%，占据父元素宽度的一半 */
  max-height: 100px; /* 限制最大高度为 100px */
  background: blue;
}

通过设置.left的flex: 0 0 50%，使其宽度占据父元素的一半，同时使用max-height: 100px限制其最大高度，从而避免其高度超出父元素。 这种方法更直接地控制了子元素的尺寸，避免了潜在的布局冲突。