带有对齐项目的 IE11 flex 包装器禁用 flex 列子项的滚动

Question

当弹性列具有最大高度并包含在弹性容器中时，如何为弹性列子启用滚动？

我这里有一个例子https://codepen.io/ChatduChesire/pen/vYKVJoR

当 .modal-wrapper 包含 align-items:center; 或 align-items 的任何其他值时，在 IE11 中没有 .modal-content 的滚动，当我删除 align-items 时一切正常美好的。我需要 .modal 溢出时高度有限，但溢出时不流动。

Answer 1

我建议您尝试将 .model 中的 overflow: hidden; 替换为 overflow: auto; class 将有助于解决 IE 11 浏览器中的问题。

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal-wrapper {
  display:flex;
  align-items:center;
  height: 100%;
}

.align-top {
  align-items: flex-start;
}

.modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 25%;
  border: 1px solid red;
  overflow: auto;
}

.modal-content {
  flex: 1 1 auto;
  overflow: auto;
  min-height:0;
}
.header, footer {
  flex: 0 0 auto;
}

<div class="modal-overlay">
<div class="modal-wrapper">
  <div class="modal">
    <header>Header</header>

    <div class="modal-content">
    
        <ul>
          <li>Item</li>
           <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
    
    </div>
    <footer>Footer</footer>
  </div>
</div>
</div>

在 IE 11 浏览器中的输出：

列表元素多时输出（会显示滚动条）。

当元素较少或只有一个时输出（正确显示高度）。

带有对齐项目的 IE11 flex 包装器禁用 flex 列子项的滚动

IE11 flex wrapper with align-items disable scroll for flex column child

css

flexbox

internet-explorer-11