时间戳

首页 > 解决方案 > Flexbox：滚动条从何而来？

html - Flexbox：滚动条从何而来？

问题描述

我只是在学习 flexbox。有人可以解释外部滚动条的来源以及它是如何正确的吗？

https://stackblitz.com/edit/web-platform-ug7ncu?file=index.html

<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
    <div style="flex: 1 0 auto;">
      <div>something</div>
    </div>

    <div style="flex: 1 0 auto; height: 100%">
      <div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
        <div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
        </div>
        <!--<div style="flex: .."></div>-->
      </div>
    </div>
  </div>

标签： htmlcssflexbox

解决方案

具有方向列的 flex 容器有两个子元素，一个具有 100% 的高度，另一个具有其中文本的高度，加起来比它们的父级高，并导致外部滚动条。

一步一步地从外到内，除非你确定它们的作用，否则不要添加属性，因为我看到你到处都撒上 height、width 和 flex: 1 0 auto ，这只会让你感到困惑，添加最低限度，只有在他们做你想做的事情时才添加额外的价值。

html, body {
  height: 100%;
}

body {
  margin: 0;
 }
<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
    <div style="flex: 1 0 auto;">
      <div>something</div>
    </div>

    <div style="overflow: auto">
      <div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
        <div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
        </div>
        <!--<div style="flex: .."></div>-->
      </div>
    </div>
  </div>

在这个例子中，我删除了所有不必要的样式。

100% 的高度什么也不做，因为 100% 的高度意味着 100% 的父级，而在这种情况下，作为身体的父级没有设置高度，所以我必须将其高度设置为 100%，而对于那个 100%工作它的父级也需要相同的 html 标签。

另一种方法是将高度设置为 100vh，这是视口的高度，但它有一些副作用，所以坚持高度 100% 更好。

推荐阅读