Flexbox wrap问题 - 在高度为100vh

Question

我想要以下弹性框布局：

1. 当内容栏中的内容溢出时，可以单独滚动侧边栏和内容区域
2. 侧边栏旁边显示的内容区域
3. 主容器的高度保持100vh，侧边栏或内容区域都不应超过此值。
4. 警报用于提醒用户有关问题。它应该在顶部，应该占据宽度的100％。
5. 用户可以选择使用侧边栏。如果未使用侧栏，则内容占据100％宽度。警报也只会在出现问题时出现。如果没有，则不会显示警告

我不确定为什么content区域显示在sidebar下方，sidebar和content区域即使在溢出后也不会激活滚动。您可以看到sidebar的高度超过main容器的高度（main区域的背景颜色为青色）。

.main {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background: cyan;
}
.main .alert {
  flex: 1 1 100%;
  background: yellow;
  height: 30px;
  order: -2;
}
.main .content {
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
}
.main .sidebar {
  flex: 0 0 auto;
  width: 200px;
  background: red;
  overflow-y: auto;
  order: -1;
}

<div class="main">
  <div class="alert">
    Hello
  </div>
  <div class="content">
    Content.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
  </div>
  <div class="sidebar">
    Sidebar
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
  </div>
</div>

Answer 1

方法＃1：flex-direction:column和嵌套的flex容器

body {
  margin: 0;
}
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: cyan;
}
.main .alert {
  flex: 1 1 30px;
  background: yellow;
}
.inner-flex-container {
  display: flex;
}
.inner-flex-container .content {
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
}
.inner-flex-container .sidebar {
  flex: 0 0 200px;
  background: red;
  overflow-y: auto;
  order: -1;
}

<div class="main">
  <div class="alert">
    Hello
  </div>
  <div class="inner-flex-container">
    <div class="content">
      Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam
      magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
      voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
      obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
      minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit,
      tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis
      magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure,
      hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum
    </div>
    <div class="sidebar">
      Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
      corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
      ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
      dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati
      optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima
      assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam,
      officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
    </div>
  </div><!-- close .inner-flex-container -->
</div>

jsFiddle

注意：

• 添加body { margin: 0; }以防止.main height: 100vh时出现溢出和垂直滚动条。
• 将flex-direction .main切换为column以建立垂直堆叠。
• 在其自己的Flex容器中包含第二个和第三个flex项（分别为.content和.sidebar），该容器具有flex-direction行，因此项目水平堆叠在第一个Flex项目下方（{ {1}}）。

方法＃2：.alert和flex-wrap:wrap

calc()

body {
  margin: 0;
}
.main {
  display: flex;
  flex-wrap: wrap;
  max-height: 100vh;
  background: cyan;
}
.alert {
  flex: 1 1 100%;
  background: yellow;
  height: 30px;
}
.content {
  flex-basis: 50%;
  background: blue;
  overflow-y: auto;
  height: calc(100vh - 30px);
  order: 1;
}
.sidebar {
  flex-basis: 50%;
  background: red;
  height: calc(100vh - 30px);
  overflow-y: auto;
}

jsFiddle

注意：

• 无法更改HTML
• <div class="main"> <div class="alert"> Hello </div> <div class="content"> Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. </div> <div class="sidebar"> Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur! </div> </div>用于从flex项目2和3的高度中减去flex项目1的高度，使它们能够在100vh容器中包裹下方。

Answer 2

编辑添加包装

.content{
    flex: 1 1 auto;
    background: blue;
    overflow-y: auto; */
    width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
    overflow-y: auto;
}

.main .sidebar {
    flex: 0 0 auto;
    width: 200px;
    background: red;
    overflow-y: auto;
    order: -1;
}

.wrapper{
    display:flex;
    flex-wrap:wrap;
}