html - Flex Grow until specific max-height inside a vertically centered div with 最小高度 100%

Question

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

这可以用 flexbox 实现吗？

这是一个简短的涂鸦:

我自己也尝试过，但是一旦我输入 100% 的最小高度而不是元素 div 的像素值，我就会遇到问题。知道如何解决这个问题并可以使用 min-height 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>

这是一个工作 fiddle :https://jsfiddle.net/zg3kLe70/14/

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

EDIT2: 我越来越接近 :) 最新的 fiddel 似乎在 chrome、firefox、edge 和 safari 中运行良好。但在 IE10/11 中，内容不居中。我认为这是最小高度的问题: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-)* 高度。 ( body 拿着一些 wrapper )

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

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>