防止柔性容器膨胀 - 填充垂直空间

问题描述 投票：0回答：1

我正在尝试制作一个带有侧边栏的布局，该侧边栏可扩展到内容区域的整个高度，而不增加该内容区域弹性容器的大小。菜单的高度设置为 50px，并且 

.container
元素必须填充剩余的垂直空间。

没有侧边栏的布局（没问题）：

https://codesandbox.io/p/sandbox/n2nr3l

这是没有侧边栏的布局，工作正常，它是顶部的菜单，下面的内容容器填充视口。接下来，我将侧边栏放入内容容器中，这导致它垂直扩展，这就是问题所在。内容容器的扩展导致100vh页面容器有滚动条。

侧边栏布局（扩展问题）：

https://codesandbox.io/p/sandbox/zg672p?file=%2Fstyles.css%3A24%2C16

HTML：

<div class="page">
  <div class="menu">menu</div>
  <div class="container">
    <div class="main"></div>
    <div class="sidebar">
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
    </div>
  </div>
</div>

CSS：

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  flex-shrink: 0;
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
}

.sidebar {
  width: 300px;
  overflow-y: scroll;
}

.content-item {
  height: 400px;
  width: 90%;
  margin: 10px;
  background-color: white;
}

html,
body {
  padding: 0;
  margin: 0;
}

侧边栏需要填充剩余的空闲垂直空间并使用垂直滚动条而不是导致扩展。

css flexbox
1个回答
0
投票

考虑将 

min-height: 0
应用于 
.container
元素。此声明会覆盖垂直 Flex 布局的子级所具有的隐式 
min-height: min-content
。这允许 
.container
缩小以适应剩余空间，这又意味着侧边栏适合该剩余空间。

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  flex-shrink: 0;
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.sidebar {
  width: 300px;
  overflow-y: scroll;
}

.content-item {
  height: 400px;
  width: 90%;
  margin: 10px;
  background-color: white;
}

html,
body {
  padding: 0;
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="page">
      <div class="menu">menu</div>
      <div class="container">
        <div class="main"></div>
        <div class="sidebar">
          <div class="content-item"></div>
          <div class="content-item"></div>
          <div class="content-item"></div>
        </div>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.