flex 布局：父元素高度与方向变化导致子元素高度异常的解决方案
在使用 Flex 布局时，如果父元素设置了 height 属性，并且改变了其方向（例如从 row 变为 column），可能会导致子元素高度出现异常。
本文将探讨一种解决方法，避免通过强制设置 flex: 0 1 auto 来解决问题。 我们可以利用 flex 和 max-height 属性来精确控制子元素尺寸，同时保持布局的灵活性。
问题示例：当父元素方向为 row 时，子元素 left 的高度正常；但当方向改为 column 时，left 的高度则变得不准确。
解决方案：
通过设置 flex: 0 0 50%; 限制 left 元素在主轴方向上的大小（此处为 50%），并使用 max-height 属性限制其最大高度。 剩余空间则由 right 元素占据。
示例代码：
.parent {
display: flex;
flex-direction: column; /* 更改方向为列布局 */
height: 500px;
}
.left {
flex: 0 0 50%; /* 占据 50% 的宽度，高度由 max-height 控制 */
max-height: 100px;
background: blue;
}
.right {
flex: 1; /* 占据剩余空间 */
background: red;
}
此方法确保蓝色区域的高度不会超过 100px，而红色区域则会自动填充剩余的可用高度。 这样既解决了高度异常问题，又保持了 Flex 布局的优势，避免了硬编码高度带来的不便。
