Question

我有一个包含3个部分的flexbox容器。这个想法是，每个部分都像一个手风琴一样展开，但是如果其中任何一个都展开了，我都需要这些部分的内容垂直溢出，前提是它将整个容器推过父容器的100％高度，同时保持在100以内Flexbox容器的容器高度的百分比。

这是我尝试的百分比高度的摘要。

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 2 1 auto;
}

#c {
  flex: 0 1 auto;
}

#s2 {
  max-height: 100%;
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

我想要的是能够获得类似于以下代码段的内容，但无需指定父元素或flex项目的显式高度。

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 2 1 auto;
}

#c {
  flex: 0 1 auto;
}

#s2 {
  max-height: 300px;
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

请注意，第3节占用了第2节推断的伸缩基础所剩余的余量。我希望第2部分增长到100％，然后溢出。甚至可以使用flexbox吗？

我被听起来相似的问题所淹没，我认为最接近的问题是：

Make a div fill the height of the remaining screen space-这非常相似，但是我的问题是“如果溢出100％，则需要滚动”。

Child with max-height: 100% overflows parent-我认为这是问题的根源。如果没有设置父高度，它将无法计算要溢出的高度。

How to make a flexbox container to scroll?-再次需要像素单位的伸缩基础。：（。

我可以使用display: tables或其他解决方案。输入完此代码后，我认为将需要一个JavaScript解决方案。

Answer 1

选中此https://codepen.io/anon/pen/EJYwmq

问题在于，flexbox中的项目具有一个隐式的“最小高度”，该最小值等于其实际高度。您可以将其设置为min-height: 0px。

html, body {
  height: 100%;
  margin: 0;
}

#container {
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#b {
  flex: 100% 1 1;
  min-height: 0px; // this is important!
  overflow: hidden;
  display: flex; // make it a flex too so you have better control of the scrollbar
  flex-direction: column;
}

#s2 {
  min-height: 0px;
  max-height: 100%;
  overflow: auto;
  background-color: lightblue;
}

Answer 2

你几乎很好。只需将#b元素也设置为flexbox容器，并使用overflow:hidden or min-height:0

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 2 1 auto;
  overflow:hidden;
  /*added this*/
  display:flex;
  flex-direction:column;
  /**/
}

#c {
  flex: 0 1 auto;
}

#s2 {
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

您也可以考虑在#b上使用height:100%

，而不是将s2设置为flexbox容器

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 2 1 auto;
  overflow:hidden;
}

#c {
  flex: 0 1 auto;
}

#s2 {
  height:100%;
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

Answer 3

手风琴的#b部分填充#container中的剩余空间-因此，您可以在此垂直空间中拆分内容-标题和#s2：

使用#b将flex-direction: column设置为 flexbox
还记得为min-height: 0设置#b（对于 flex项默认为{em> auto 是min-height）
flex: 1在#b中就足够了，而不是flex: 2 1 auto
还将flex: 1添加到#s2，以使其填充#b内的剩余空间（您可以放下max-height: 100%）。

请参见下面的演示

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%; 
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 1; /* this would do */
  display: flex; /* added*/
  flex-direction: column; /* added */
  min-height: 0; /* added */
}

#c {
  flex: 0 1 auto;
}

#s2 {
  flex: 1; /* added */
  /* max-height: 100%;*/
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

现在您有了全视野手风琴-您还可以让#container仅在展开手风琴项目时占用所需的空间，并允许其展开直到仅在此之后视口高度和溢出-只需将height: 100%中的container更改为max-height: 100%-参见下面的演示：

html, body {
  height: 100%;
  margin: 0;
}

#container {
  width: 100%;
  max-height: 100%; /* changed to max-height */
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#a {
  flex: 0 1 auto;
}

#b {
  flex: 1; /* this would do */
  display: flex; /* added*/
  flex-direction: column; /* added */
  min-height: 0; /* added */
}

#c {
  flex: 0 1 auto;
}

#s2 {
  flex: 1; /* added */
  /* max-height: 100%;*/
  overflow: auto;
  background-color: lightblue;
}

<div id="container">
    <div id="a"><div>Section 1</div></div>
    <div id="b">
      <div>Section 2</div>
      <div id="s2">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
      </div>
    </div>
    <div id="c"><div>Section 3</div></div>
</div>

将Flexbox容器保持在100％的高度内并让溢出的孩子

3 个答案: