CSS Flexbox全高列

我正在尝试使用Flexbox创建一个简单的两列网页，占据整个宽度和高度。左栏的固定宽度为

200px

，而中的右栏占用了剩余空间

到目前为止，我已经：

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

.flexbox {
  height: 100%;
  display: flex;
}

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

以及：

左边
正当

宽度按预期工作，

right

占用了除

left

占用的

200px

以外的所有剩余空间。但是，它们不是全高的吗

---

这不是重复的，因为它使用Flexbox

尝试使用视口高度。这将使div成为视口的全高

.flexbox {
  height: 100vh;
  display: flex;
}

---

当然，它是重复的，这意味着这个问题已经有了答案，即使Flexbox最外层的flex容器也需要一个高度，因为您使用百分比作为其高度，该百分比值基于其父级，在本例中，父级是

主体

。您不需要使用Flexbox，甚至使用flexbox也与解决方案无关。

.flexbox {
  height: 100vh;
  display: flex;
}