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

Question

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

这可以用flexbox吗？

这是一个简短的涂鸦：

我自己也试过了，但是一旦输入100％的minheight而不是像素值的物品div，我就会遇到问题。 任何想法我如何解决这个问题，可以使用最小高度100％？

＆＃13;

＆＃13;

* {
  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;
  }
  
  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一个工作小提琴：https://jsfiddle.net/zg3kLe70/14/

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

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

谢谢你， 马可

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>

Answer 2

好的，我刚刚发现，它是如何工作的：）

首先，我需要为内容div提供100％的弹性基础。只是最小宽度是不够的。其次，我删除了所有不必要的包装器。我最终的结果非常简单但有效：

＆＃13;

＆＃13;

* {
  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;
  }

  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

谢谢！