Flex 增长直到垂直居中的 div 内的特定最大高度，最小高度为 100%

Question

我需要一个位于 100vh 最小高度容器内的居中框，最小高度为 100%，最大高度为 600 像素。到目前为止，这很容易。但在我居中的框中，我还有 3 个其他元素（标题、内容和页脚）。内容部分必须增长，直到达到所有可用空间（在这种情况下，它是父级的最大高度减去标题和 gg 部分）。

flexbox 可以做到吗？

这是一个简短的涂鸦：

我自己也尝试过，但是一旦我输入 100% 的最小高度而不是项目 div 的像素值，我就会遇到问题。 知道如何解决这个问题并且可以使用最小高度 100% 吗？

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.wrapper {
  background: rgba(red, 0.3);
  display:flex;
  min-height:100vh;
  align-items: center;
  justify-content:center;
  //flex-direction:column;
  
  .wrapper-inner {
    padding:20px;
    max-width:80%;
    min-height:100%;
    //max-height: 500px;
    background:#fff;
    display:flex;
    flex-direction:column;
    background: rgba(green, 0.2);
    
  }
  .item {
    width:100%;
    min-height:100%;
    display:flex;
    flex-direction:column;
    max-height:600px;
    background:#fff;
  }
  
  .titel,
  .content,
  .footer {
    padding:10px;
    background: rgba(#000, 0.2);
    margin-bottom:10px;
  }
  .content {
   flex-grow:1;
  }
  
  
}

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="item">


      <div class="titel">Titel here...</div>
      <div class="content">
        content goes here. this box has to grow until the space is filled.
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="footer">gg</div>
    </div>
  </div>


</div>

这是一个有效的小提琴：https://jsfiddle.net/zg3kLe70/14/

编辑：这里的设计： 白盒必须填充可用的最大高度空间。

EDIT2：我越来越近了 :) 最新的 fiddel 似乎在 chrome、firefox、edge 和 safari 中运行良好。但在 IE10/11 中，内容没有居中。我认为这是 min-height:100 vh 的问题... https://jsfiddle.net/zg3kLe70/26/

谢谢你， 马可

Answer 1

您可以使用更少的包装器。 对于单个框位于中心 （body 是 wrapper-inner）：

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: lightblue;
}

body {
  max-height: 600px;
  width: 80%;
  border: solid;
  margin: auto;
  background: crimson;
  color: white;
}

main {
  flex: 1;
  background: maroon;
  /* overflow:auto; */
  /* recommended*/
}

body>* {
  padding: 3vh;
}

<header>
  <h1>header any height</h1>
</header>
<main>
  <p>should it be scrolling when needed</p>
</main>
<footer>
  <p>footer any height</p>
</footer>

对于以 100vh 堆叠的几个盒子和一个居中的盒子，需要一个额外的包装器来设置 100% 高度，并需要一个内部包装器来设置 *(max-)*height。 (body 里面有几个包装)

第一个框可能是您在下面的 sn-p 中寻找的那个，从它的内容开始增长，直到达到最大高度集）

html, body , .wrapper, .wrapper-inner{
  height:100%;
}
.wrapper, .wrapper-inner {
  display:flex;
  flex-direction:column;
  width:80%;
  margin:auto;
}
.wrapper-inner {
  max-height:600px;
  border:solid;
  background:crimson;
  color:white;
}
main {
  flex:1;
  background:maroon;
   overflow:auto; /* recommended*/
}
.wrapper:first-of-type .wrapper-inner {
height:auto;
}

.wrapper-inner > * {
  padding:3vh;
}

<div class="wrapper">
  <div class="wrapper-inner">
  <header><h1>header any height</h1></header>
<main> <p>first box will grow up 600px max</p> </main>
<footer><p>footer any height</p></footer></div>
</div>

<div class="wrapper">
  <div class="wrapper-inner">
  <header><h1>header any height</h1></header>
<main> <p>should it be scrolling when needed</p> </main>
<footer><p>footer any height</p></footer></div>
</div>

<div class="wrapper">
  <div class="wrapper-inner">
  <header><h1>header any height</h1></header>
<main> <p>should it be scrolling when needed</p> </main>
<footer><p>footer any height</p></footer></div>
</div>

Answer 2

好的，我刚刚发现，它是如何工作的 :)

首先，我需要 100% 的内容 div 的 flex-basis。仅 min-width 是不够的。其次，我删除了所有不必要的包装。我最终的结果非常简单但有效：

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body {
  display:flex;
  flex-direction:column;
}
.wrapper {
  background: rgba(red, 0.3);
  display:flex;
  margin:0 auto;
  min-height:100vh;
  width:80%;
  
  .item {
    display: flex;
	flex-direction: column;
	flex-basis: 100%;
	background: rgba(green, 0.3);
	justify-content: center;
  }
  
  .titel,
  .content,
  .footer {
    padding:10px;
    background: rgba(#000, 0.2);
    margin-bottom:10px;
  }
  .content {
   flex-grow:1;
   flex-basis:100%;
   max-height:300px;
   min-height:100px;
  }

  
}

<div class="wrapper">
    <div class="item">
      <div class="titel">Titel here...</div>
      <div class="content">
          content goes here. this box has to grow until the space is filled
      </div>
      <div class="footer">footer here</div>
    </div>
</div>

这里是小提琴：https://jsfiddle.net/zg3kLe70/33/

谢谢！