我正在尝试创建以下内容：
一个.mainFlex容器，其中包含3个flex框。
box1永远不会很高。它不需要滚动，扩展或缩小。可以说它占据了容器高度的10％。
box2的内容可变。如果只有一两行，则其高度只能与该内容一样高。如果更多，它可以扩展到40％的高度，为box3保留至少50％的容器高度。一旦容器的最大高度达到40％，则应在box2上滚动溢出。
box3应该占父容器高度的80％，少至50％。溢出应该是可滚动的。
这里的codepen：
http://codepen.io/JWindels/pen/XbLLop
<div class="container"><div class="row"><div class="FCpanel"><div class="mainFlex col-xs-8"><div class="box1">This is some text</div><div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div><div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div></div><div class="mainFlex col-xs-2 col-xs-offset-1"></div></div></div></div>
我的问题：
以百分比设置max-heights不会使overflow：scroll起作用。但是，如果我对box2和box3中的max-height使用em测量值，则冒着风险，使box3中的内容超过父容器的高度，即使滚动也无法看到。
最佳答案
这似乎正常工作：
.FCpanel > .mainFlex > .box1 {
max-height: 10%;
overflow: auto;
}
.FCpanel > .mainFlex > .box2 {
max-height: 40%;
overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
flex: 1;
overflow: auto;
}
.FCpanel {
overflow: hidden;
border-radius: 0.5em;
margin-bottom: 1em;
}
.FCpanel > .mainFlex {
background: #ebf6fd;
box-shadow: 0em 0.125em 0.5875em #666;
font-family: "OpenSans-Bold", "Open Sans", sans-serif;
padding: 0px;
border: solid 1px #428cca;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
height: 516px;
color: #fff;
font-size: 1.4em;
}
.FCpanel > .mainFlex > .box1 {
max-height: 10%;
overflow: auto;
background-color: #f00;
}
.FCpanel > .mainFlex > .box2 {
background-color: #0f0;
max-height: 40%;
overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
flex: 1;
overflow: auto;
background-color: #00f;
}<div class="container">
<div class="row">
<div class="FCpanel">
<div class="mainFlex col-xs-8">
<div class="box1">This is some text</div>
<div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div>
<div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text
sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his
is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div>
</div>
<div class="mainFlex col-xs-2 col-xs-offset-1"></div>
</div>
</div>
</div>基本上，
height: auto; flex-basis: auto使box1和box2与内容一样高。然后
max-height阻止它们增长。注意Flexbox将
auto添加为min-height的初始值，因此，为了使max-width正常工作，可以使用min-height: 0或将overflow设置为除visible以外的任何值，这会使min-height: auto就像min-height: 0。在这种情况下，我使用
overflow: auto，它将仅在必要时产生滚动条。最后，将
flex: 1设置为box3使其增长以填充剩余空间（flex-grow: 1），而忽略其内容（flex-basis: 0%）。请注意，这些框将使用默认的
flex-shrink: 1，但它们不会缩小，因为它们的高度不会大于100％。如果要确定，请随时设置flex-shrink: 0。