使用flexbox布局的滚动超出内容

Question

使用flexbox布局的滚动超出内容

347

这里输入图片描述

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

我省略了用于样式的代码，您可以在这个笔记本中看到所有内容。

上述方法可行，但当content区域的内容溢出时，整个页面都会滚动。我只想让内容区域本身滚动，因此我将overflow: auto添加到content div中。

现在问题是列本身不会延伸超过其父元素的高度，所以边框也被切断了。

这里是展示滚动问题的笔记本。

如何设置content区域独立滚动，同时仍然使其子元素超出content框的高度？

- Joseph Silber

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zhishaofei3 · Answer 1

.list-wrap {
  width: 355px;
  height: 100%;
  position: relative;

  .list {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    width: 100%;
  }
}

- Altair21 · Answer 2

这是我的观点，留在这里给其他人参考。在这个例子中，我使用的是Bootstrap 4（用于类的参考）。在我的情况下，我需要添加一个flex:1，以便正确滚动，并为父容器设置特定的高度（不是百分比）。我仍然不确定为什么需要flex:1，因为它本质上只是flex-grow:1和设置flex-basis:0%。

<div
  class="flex-parent-container d-flex flex-column flex-column-fluid"
  style="height: 80vh" ----> set some arbitrary value on the parent container
>
  <h1
    class="my-10 border-bottom-dashed border-gray-300 p-5 py-10"
    style="font-size: 24px"
  >
    Lorem Ipsum
  </h1>
  <div
    class="flex-parent d-flex flex-column flex-column-fluid gap-10 p-5 scroll-y"
    style="font-size: 14px; flex: 1; overflow-y: auto" ----> flex: 1 is required!
  >
    <div
      class="flex-item d-flex flex-row fluid justify-content-between selected p-7"
    ></div>
  </div>
</div>

- manwe858 · Answer 3

人们已经注意到接受的答案 CodePens不再起作用。我研究了可能的原因，并在下面使它们正常工作：

更改很简单：

对于1. 短列被拉伸，尽管当前的要点起作用，但不再需要.box上的min-height属性。

.box {
  display: flex;
}

检查员指出--webkit-min-content是一个无效的属性值，将被忽略。新版本的浏览器已经支持min-content。现在不再需要指定高度。内容div的flex属性使其延伸到视口的底部。

对于2. 长列滚动，将min-height: -webkit-min-content;改为height: min-content。

.box {
  height: fit-content;
  min-height: 100%;
  display: flex;
}

看起来只设置min-height: fit-content;是不起作用的。这可能是min-height的一个bug。我在Chrome和Firefox上进行了测试，两个浏览器的行为都是一样的，min-height都无法正常工作。

将min-height设置为100%会使列的边框延伸，即使列比.box div短。