Question

首先，我要说不幸的是我仍然需要支持IE11，我不相信这是一个重复的问题，虽然我发现了一些类似的东西。

我有一个简单的模态窗口，在列，页眉，页脚和主页中包含3个灵活组件。

计划是外框应该随着内容的增长而增长，直到它达到屏幕高度的80％，此时模态的中间部分设置为overflow-y：auto应该得到一个滚动条和主模态不会更高。

这是我的标记

<div class="modal-wrapper">
  <div class="modal">
    <div class="modal-header">Header</div>
    <div class="modal-main">
      <div>Content goes here, could get very long</div>
     </div>
    <div class="modal-footer">Footer</div>
  </div>
</div>

相当标准的东西。模态设置为flex，页眉和页脚是固定高度。中间部分设置为必要时增长和缩小。主要的是.modal永远不会溢出.modal-wrapper。

我有一个jsfiddle设置，它已经在Chrome，Firefox，Safari和iOS中进行了测试，如果你向上和向下拖动右下方框高度你会看到它应该如何表现，它工作正常。 IE11虽然很乱。

https://jsfiddle.net/jonhobbs/sf6untnt/3/

现在，我觉得这可能与这里的最小高度错误有关：

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

但是我不相信它就是那个bug，因为这个bug的解决办法似乎没有用（例如使用min-height：1px而不是0，包装在另一个flexbox等中）。

希望SO上的某个人可以看看jsfiddle并看到一个明显的问题

Answer 1

也许如果你让它成为一个灵活的孩子并使用flex:0 1 80%;，它应该解决你的IE问题：

例如

html, body{
  height: 100%;
  display:flex;
  flex-flow:column;
}

.modal-wrapper{
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 0 auto;
  flex:0 1 80%;/* IE gets it , because the flow is column */
  max-height:80%;/* others such as FF gets it */
  background: white;
}

.modal{
  display: flex;
  flex-glow: 1;/* doesn't exist */
  flex/*-shrink*/: 1; /* good enough */
  flex-direction: column;
  min-height: 1px;
}

.modal-main{
  flex: 1;/* good enough */
  min-height: 1px;
  overflow-y: auto;
  padding: 20px;
}

.modal-header, .modal-footer{
  flex-grow: 0;
  flex-shrink: 0;
  height: 60px;
  color: white;
  line-height: 60px;
  text-align: center;
  background: dodgerblue;
}

<div class="modal-wrapper">
  <div class="modal">
    <div class="modal-header">Header</div>
    <div class="modal-main">
      <div>This content could get very long so I'm going to put a big long div in it</div>
      <div style=" width:100px; height:1000px; background-color:red; opacity:0.1;"></div>
    </div>
    <div class="modal-footer">Footer</div>
  </div>
</div>

https://jsfiddle.net/sf6untnt/7/

IE11中的Flexbox溢出容器高度

1 个答案: