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

Question

我不熟悉在 CSS 中使用弹性框。但这对于组件之间的对齐和可用空间分配来说似乎非常好！

今天我遇到了一个我无法解决的问题。提前感谢您的帮助。

这是一个快速说明问题的代码笔： 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>

解释：

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

在内容部分，我有几个“部分”（其他项目的组）。 我希望这些“组”彼此等距（即：之间的可用空间尽可能增长。我看到了弹性容器属性justify-content: space-evenly，这正是我想要的。

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

问题是当我有很多内容并且无法显示时。所以所有的“组”都会被粘住。美好的。我将我的内容设置为 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

堆栈sn-p

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 方向时，将位于弹性容器的顶部和底部。