Flexbox - 两列布局答案

【问题标题】：Flexbox - two column layoutFlexbox - 两列布局
【发布时间】：2020-04-04 21:05:43
【问题描述】：

我刚开始使用 flexbox。我正在尝试创建一个两列布局。

我创建了下面的代码，它有效，唯一的问题是容器.menu 和.content 在调整浏览器窗口大小以显示滚动条时不会伸展到底部。我该如何解决这个问题？

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    body {
      margin: 0;
    }
    
    .wrap {
      display: flex;
      height: 100vh;
      background: aqua;
    }
    
    .menu {
      width: 280px;
      background: orange;
    }
    
    .content {
      flex: 1;
      background: green;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="menu">
      child
    </div>
    <div class="content">
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
</body>

</html>

【问题讨论】：

这就是使用 flexbox 的目的，它的工作方式应有尽有，只有当您调整的大小小于内容时才会出现滚动条，否则 flex 框将不会显示滚动条，这是用于响应式设计跨度>

标签： html css flexbox multiple-columns

【解决方案1】：

将 .wrap 的 CSS 上的 height: 100vh; 更改为 min-height: 100vh;。

【讨论】：

【解决方案2】：

您应该将height: 100vh 的.wrap 更改为min-height: 100vh; 这样，它将至少与视口（即窗口）一样高，但如果内容高于适合视口的内容（因为默认设置 height 是auto，无需添加）：

.wrap {
  display: flex;
  min-height: 100vh;
  background: aqua;
}

.menu {
  width: 280px;
  background: orange;
}

.content {
  flex: 1;
  background: green;
}

<div class="wrap">
  <div class="menu">
    child
  </div>
  <div class="content">
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
  </div>
</div>

【讨论】：