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

Question

我是 CSS 中使用弹性框的新手。但这对于组件之间的对齐和自由 space 分布来说似乎非常好！

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

这里有一个代码笔可以快速说明问题： 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>

解释：

我有一些 "boxes"（实际上它们是模态），带有页眉、页脚和介于两者之间的一些内容。我希望页眉和页脚部分始终可见，如果内容太大而无法全部显示则滚动。

在内容部分，我有几个"sections"（其他项目组）。我希望这些 "groups" 彼此等距（即：自由 space 之间可以增长。我看到 flex 容器属性 justify-content: space-evenly 这正是我想要的想要。

当我需要很多 space 来显示我的内容时，这很好。我把所有可用的 space 和 "harmony".

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

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

弹性项目上的 justify-content: space-around 或 justify-content: center + margin: auto 同样的问题。

唯一可行的解决方案是 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 也需要添加另一个新功能，一个新的 keyword 称为 safe，尽管它仍然是 a working draft，而且不多（如果有的话）浏览器还支持它。

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

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

Content can be hidden using CSS flexbox with overflow

html

css

overflow

flexbox

解释：