CSS Flexbox全高列[重复]

Question

我正在尝试使用 Flexbox 创建一个简单的两列网页，该网页占据全宽和全高。左列固定宽度为200px，而右列 in 占用剩余空间。

到目前为止，我有：

: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 占据了除 left 占用的 200px 之外的所有剩余空间。但是，它们不是全高吗？

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

Answer 1

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

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