IE11的Flexbox最大高度问题

IE11的Flexbox最大高度问题

要在Chrome，Safari，Firefox和IE11中使用该布局，您需要解决两个问题。

d性商品的最小尺寸算法。

d性项目默认情况下不能小于其内容的大小。规格中的最小尺寸定义为

min-width: auto

和

min-height: auto

。

一些浏览器会自行调整此设置（这就是为什么您的布局可在Chrome中使用的原因）。其他浏览器要求您覆盖默认设置（这是FF和IE11中所需要的）。

您可以使用

min-width: 0

/

min-height: 0

或

overflow

除以外的任何值覆盖默认值

visible

。

将此添加到您的代码：

.flex-wrapper .flex-wrapper-inner .column-wrapper {    flex-grow: 1;    display: flex;    overflow: hidden;; }

这是更完整的说明：

• 为什么d性项目不能缩小到内容大小以上？

---

IE11忽略了d性容器上的

max-height

和

min-height

。

在您的布局中，看来IE11只是忽略了您的

max-height

和

min-height

规则。但是，这些规则似乎对d性项目很好用。因此，使您的容器也成为d性物品。

将此添加到您的代码：

body {  display: flex; }

---

body {  display: flex; }.flex-wrapper {  display: flex;  margin: 20px auto;  width: 1184px;  max-height: 80vh;  border: 2px solid red;  smin-height: 150px;  flex-shrink: 0; }.flex-wrapper .flex-wrapper-inner {  display: flex;  width: 100%;  flex-direction: column;}.flex-wrapper .flex-wrapper-inner .header {  display: flex;  flex-shrink: 0;  width: 100%;}.flex-wrapper .flex-wrapper-inner .header H4 {  flex: 1;}.flex-wrapper .flex-wrapper-inner .column-wrapper {  flex-grow: 1;  display: flex;  overflow: hidden;; }.flex-wrapper .flex-wrapper-inner .column {  flex: 1;  overflow-y: auto;}.flex-wrapper .flex-wrapper-inner .column H4 {  text-align: center;}.box-results-users .list-group-item {  margin: 0;}.box-results-users .list-group-item IMG {  height: 60px;  width: 60px;}.box-results {  position: relative;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div >  <div >    <div >      <h4>Box 1</h4>      <h4>Box 2</h4>      <h4>Box 3</h4>    </div>    <div >      <div >        <div >          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>        </div>      </div>      <div >        <div >          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>          <a  href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>        </div>      </div>      <div >        <div >          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>          <div > <div >   <a href="#">     <img  src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">   </a> </div> <div >   <h4 >User Test</h4> ... </div>          </div>        </div>      </div>    </div>  </div>