CSS Flexbox全高度列

Question

我正在尝试使用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
}

和

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

宽度按预期工作，right占用除200px占用的left以外的所有剩余空间。但是，它们不是全高？

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

Answer 1

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

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