IE11 div 高度计算不正确

Question

我有以下 code snippet，它在 chrome 上呈现得非常好，但是在 IE11 上，.wrapper div 元素的高度计算不正确。

IE11 的修复需要什么？我试过四处寻找修复程序，但找不到最终解决此问题的方法。

Answer 1

从您的 .container css 中删除 flex:1 解决了问题

Answer 2

作为 https://caniuse.com/#search=flexbox（参见已知问题）：

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

Answer 3

删除display:flex； flex;1 css 选择器 .container

行

body {
  background-color: gray;
}


.wrapper {
    display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  background-image: linear-gradient(90deg, #f17e5d 35%, #f6d365 100%);
  padding: 80px 0px;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
}

.container {
    background: #fff;
  padding: 20px;
  border-radius: 4px;
  justify-content: center;
  align-self: center;
  width: 455px;
  top: 5px;
  position: relative;
  flex-direction: column;
}

.headline {
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.orderedList {
    font-style: italic;
  font-size: 16px;
  color: black;
  padding: 18px;
  position: relative;
  top: -28px;
  margin: 0;
}

.listItem {
  padding: 0 5px;
}

.listContent {
    padding: 1px;
  font-style: normal;
  color: black;
  margin-left: 5px;
  white-space: pre-line;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="headline">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
  </div>
  
  <div class="wrapper">
    
    <div class="container">
      <ol class="orderedList">
        <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
      </ol>
      
    </div>
  </div>
</body>
</html>

IE11 div 高度计算不正确

IE11 div height is not calculated correctly

html

css

internet-explorer-11