html - 内容可以使用带有溢出的 CSS flexbox 隐藏

Question

我不熟悉在 CSS 中使用 flexbox 。但这对于组件之间的对齐和自由空间分配来说似乎非常好!

今天我遇到了一个我没能解决的问题。预先感谢您的帮助。

这是一个代码笔来快速说明问题: https://codepen.io/anon/pen/BYdzqR

#example1 .wrapper, #example1bis .wrapper{
  justify-content: space-between;
}
#example2 .wrapper, #example2bis .wrapper{
  justify-content: space-evenly;
}
#example3 .wrapper, #example3bis .wrapper{
  justify-content: space-around;
}
#example4 .wrapper, #example4bis .wrapper{
  justify-content: center;
}
#example4 .content .group, #example4bis .content .group {
margin: auto;
}

#example1, #example2, #example3, #example4{
  height: 600px;
}
#example1bis, #example2bis, #example3bis, #example4bis{
  height: 300px;
}

.root{
/*   background: lightblue; */
  margin-bottom: 20px;
  display: flex;
}
.box {
  width: 300px;
  height: 300px;
  border: 1px solid gray;
  text-align: center;
  margin: 0 20px;
  flex: 0 0 auto;
}
.wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

/* ----------------------------- */
/* Top */
/* ----------------------------- */
.top {
  padding: 20px 0;
  overflow: hidden;
  flex: 0 0 auto;
  border-bottom: 1px solid lightgray;
}

/* ----------------------------- */
/* Content */
/* ----------------------------- */
.content {
  padding: 10px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.content .group {
  flex: 0 0 auto;
  background: yellow;
  width: 100%;
}
.content h2 {
  margin: 0;
  padding: 0;
  color: red
}

/* ----------------------------- */
/* Bottom */
/* ----------------------------- */
.bottom {
  text-align: center;
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
  flex: 0 0 auto;
  border-top: 1px solid lightgray;
}

<h1>Reference : without overflow</h1>
<p>Different kind of free space allocation. What I would like is something like #2 ("justify-content: space-evenly"). Eventually #3 ("space-around") or #4 ("center", with "margin: auto" on items)</p>
<div class="root">
  <div id="example1" class="box">
    <div class="wrapper">
      <div class="top">
        #1 : space-between
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example2" class="box">
    <div class="wrapper">
      <div class="top">
        #2 : space-evenly
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example3" class="box">
    <div class="wrapper">
      <div class="top">
        #3 : space-around
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example4" class="box">
    <div class="wrapper">
      <div class="top">
        #4 : center
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
</div>

<h1>Problem : with overflow</h1>
<p>The problem is when there is not enough free space to display all the content. "overflow-y: auto" should allow to scroll to see all the content, but this is not the case with #2, #3 and #4... ("Section 1" title hidden)</p>
<div class="root">
  <div id="example1bis" class="box">
    <div class="wrapper">
      <div class="top">
        #1bis : space-between = OK
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example2bis" class="box">
    <div class="wrapper">
      <div class="top">
        #2bis : space-evenly = KO
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example3bis" class="box">
    <div class="wrapper">
      <div class="top">
        #3bis : space-around
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
  <div id="example4bis" class="box">
    <div class="wrapper">
      <div class="top">
        #4bis : center
      </div>
      <div class="content wrapper">
        <div class="group">
          <h2>Section 1</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 2</h2>
          <p>blah</p>
        </div>
        <div class="group">
          <h2>Section 3</h2>
          <p>blah</p>
        </div>
      </div>
      <div class="bottom">
        footer
      </div>
    </div>
  </div>
</div>

解释:

我有一些“框”(实际上它们是模态)，带有页眉、页脚和一些内容。我希望页眉和页 footer 分始终可见，如果内容太大而无法全部显示，则滚动。

在内容部分，我有几个“部分”(其他元素组)。我希望这些“组”彼此等距(即:如果可以的话，它们之间的自由空间会增加。我看到了 flex 容器属性 justify-content: space-evenly 这正是我想要的.

当我有足够的空间来显示我的内容时，这很好。我用“和谐”占据了所有可用空间。

问题是当我有很多内容时无法显示。所以所有的“组”都会被粘住。美好的。我将我的内容放在 overflow-y: auto 中，以便在这种情况下它会滚动。

但是使用 justify-content: space-evenly，即使滚动条位于顶部，我也无法访问内容的顶部。它在内容包装器之外...

与 justify-content: space-around 或 justify-content: center + margin: auto 在 flex 元素上有同样的问题。

唯一可行的解​​决方案是justify-content: space-between，但不幸的是这不是我想要的行为...

如果有滚动条，我该怎么做才能实现这一点并访问我的所有内容？？

谢谢。

Answer 1

space-evenly 是一个新属性，不能跨浏览器工作(在最后阅读更多内容)。

从今天开始，您可以使用 auto margin ，在这种情况下，所有 group 项都获得底部自动边距，第一个也获得顶部自动边距。

这将生成您要求的输出。

Updated codepen

堆栈片段

body {
  margin: 0; 
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}

.content {
  padding: 10px;
  overflow: auto;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
}
.content .group {
  margin-bottom: auto;
  flex: 0 0 auto;
  background: yellow;
}
.content .group:first-child {
  margin-top: auto;
}
.content h2 {
  margin: 0;
  padding: 0;
}

.top, .bottom {
  text-align: center;
  padding: 20px 0;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid lightgray;
}

<div class="wrapper">
  <div class="top">
    auto margin
  </div>
  <div class="content">
    <div class="group">
      <h2>Section 1</h2>
      <p>blah</p>
    </div>
    <div class="group">
      <h2>Section 2</h2>
      <p>blah</p>
    </div>
    <div class="group">
      <h2>Section 3</h2>
      <p>blah</p>
    </div>
  </div>
  <div class="bottom">
    footer
  </div>
</div>

---

即使使用 space-evenly 也需要添加另一个新功能，一个名为 safe 的新 keyword，尽管它仍然是 a working draft ，而且还没有很多(如果有的话)浏览器支持它。

原因是，当使用例如justify-content, the overflow ，在这种情况下，当使用 column 方向时，将位于 flex 容器的顶部和底部。