弹性框未显示元素

Question

我正在尝试创建2列布局，其左侧具有固定的宽度，而灵活的右侧则填充了屏幕的其余部分。列未显示。

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.left-column {
  flex: 0 0 200px;
  height: 100%;
  background: lightcoral;
}

.right-column {
  flex-grow: 1;
  background: lightgreen;
}

https://stackblitz.com/edit/2-column-fixed-flex

Answer 1

您需要分配高度和flex-direction:row;，并为固定宽度left-column指定宽度。

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}