Styled Components+Typescript中Flexbox仅显示第二列的修复方法

问题根源 #

你的代码中存在一个关键CSS语法错误：display: flex: 末尾使用了冒号而非分号，这会导致flex布局规则无法生效，容器仍以块级元素渲染，子元素默认上下排列，最终出现布局异常。此外，单独使用width控制flex子元素宽度时，可能会受到flex容器默认属性影响导致显示异常。

正确实现代码 #

interface IProps {
  width: [string, string];
}

export const FlexContainer = styled.div<IProps>`
  border: 1px solid red;
  height: 500px;
  display: flex; /* 修正语法错误：将冒号改为分号 */

  .divOne {
    border: 2px solid pink;
    flex: 0 0 ${(p) => p.width[0]}; /* 固定宽度，避免拉伸/压缩 */
    height: 100%; /* 自适应容器高度 */
  }

  .divTwo {
    border: 2px solid green;
    flex: 0 0 ${(p) => p.width[1]}; /* 固定宽度，避免拉伸/压缩 */
    height: 100%; /* 自适应容器高度 */
  }
`;

关键优化点 #

1. 修正语法错误：将display: flex:改为display: flex;，确保flex布局正常启用。
2. 使用flex属性控制宽度：flex: 0 0 [宽度值]等价于flex-grow: 0（不允许拉伸）、flex-shrink: 0（不允许压缩）、flex-basis: [宽度值]（初始宽度），能稳定控制flex子元素的宽度，避免受容器默认规则影响。
3. 自适应高度：将子元素固定高度500px改为height: 100%，让子元素自动填满容器高度，提升布局灵活性。

关于align-content: stretch的说明 #

align-content属性仅在flex容器包含多行flex子元素时生效，你的场景是单行两列布局，因此该属性不会产生任何效果。如果需要子元素在交叉轴（垂直方向）填满容器，align-items: stretch是flex容器的默认值，无需额外设置。

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