html - 为 、 和其他 flex 布局元素添加滚动条

Question

这个问题在这里已经有了答案:





Why don't flex items shrink past content size?

(4 个回答)


5年前关闭。




我正在尝试将内容限制在基于 flex 的布局中，该布局使用以下简单代码:

<header>header</header>
<section>
  <aside>aside long content...</aside>
  <main>main long content...</main>
  <aside>aside long content...</aside>
</section>
<footer>footer</footer>

我拥有的CSS是:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 50px;
  min-height: 50px;
  background: black;
  color: #fff;
}

section {
  flex-grow: 1;
  display: flex;
}

section aside  {
  width: 100px;
  background: #ccc; 
  height:100%;
  overflow:scroll;
}

section main {
  overflow:scroll;
  flex-grow: 1;
}

问题是，当向边或主要元素添加长内容时，这些元素中的水平滚动显示正常，但是垂直滚动不显示，但元素变得与其内容一样高，将所有内容推到它下面(页脚)离屏。然后客户区获得垂直滚动。

我需要这些元素在没有内容的情况下仍然表现得像它们显示的那样，但是如果它们的内容大于它们的屏幕尺寸，则具有滚动条。

而不是这个(溢出得到滚动):


我明白了(溢出是可见的，将所有元素推开):

Answer 1

删除 height: 100%;来自 section aside因为它不是必需的。 section设置为 flex-grow: 1; ，这意味着整个区域将占据可用的视口(viewport)高度，并且 aside是 section 的 flex 子代所以aside的高度会自动填充section的高度.

PS那个布局看起来很熟悉；)

* {margin:0;padding:0;}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 50px;
  min-height: 50px;
  background: black;
  color: #fff;
}

section {
  flex-grow: 1;
  display: flex;
}

section aside  {
  width: 100px;
  overflow:scroll;
}

section main {
  overflow:scroll;
  flex-grow: 1;
}

aside .inner {
  background: #ccc;
}

<header>header</header>
<section>
  <aside><div class="inner"><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p></div></aside>
  <main>main long content...</main>
  <aside><div class="inner">main long content...</div></aside>
</section>
<footer>footer</footer>