伸缩增长，直到垂直高度居中的特定最大高度（最小高度为100％）

Question

我需要一个最小高度为100vh的容器内的居中框，最小高度为100％，最大高度为600px。到目前为止，这很容易。但在居中的框中，我还有其他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：我越来越近了：）最新的菲德尔犬似乎在chrome，firefox，edge和safari中效果很好。但在IE10 / 11中，内容未居中。我认为这是最低高度：100 vh的问题... https://jsfiddle.net/zg3kLe70/26/

谢谢Marco

Answer 1

您可以使用更少的包装纸。对于位于中心的单个盒子（主体是包装内部）：

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-)* 高度。 （身上有一些包装纸）

第一个框可能是您在下面的代码片段中寻找的框，从其内容开始增长，直到达到最大高度设置）

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>