Question

a longstanding issue with Internet Explorer 11 and flexbox必须使用flex声明单位，例如

/* Works */
flex: 1 0 0%;
/* Does not work */
flex: 1 0 0;

解决方法是指定结束零的单位 - 最好是%，因为minifiers通常不会删除该单位。

不幸的是，我正在使用Prepros（SCSS编译器），我使用内置的CSS minifier决定删除百分比。我原以为这只会给我IE 11中的问题，但现在我注意到所有其他主流浏览器也出现了这个问题（在Edge，FF，Chrome上测试过）。

请使用以下代码。我希望主要元素（绿色）增长以适应其内容，但事实并非如此。至少在使用无单位值时不会。如果您将main flex更改为1 0 0%，那么一切都会按预期工作。那是为什么？

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0;
}

footer {
  background: blue;
  height: 80px;
}

<div class="page-wrapper">
  <!-- more HTML elements -->
  <div class="container">
    <header></header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>

      <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
        turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Nam nec ante. </p>

    </main>
    <footer></footer>
  </div>
</div>

Answer 1

修订答案

使用无单位0作为flex-basis属性的初始值时，高度将基于flex-grow / flex-shrink值。

在这种情况下，flex-grow值1会告诉项目增长并填充其父级的剩余空间container。

container的高度设置为100％，这将基于其父级身高page-wrapper。

但由于page-wrapper的高度不是container计算其100％的高度，因此它将为0，因此main也会

现在，如果将flex-basis更改为百分比0%，则会在flex-grow / {{之前将其高度基于内容将添加1}}值，因此flex-shrink内容将可见。

要在所有浏览器上获得一致的输出，所有父母都需要main，height需要一个单位（或简单地说，IE11需要一个单位，其余的不需要）< / p>

＆＃13;

flex-basis

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}

.page-wrapper {
  height: 100%;                     /*  added  */
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0%;                     /*  IE11 need a unit  */
}

footer {
  background: blue;
  height: 80px;
}

＆＃13;

关于你的Prepros（SCSS编译器），我想它可以做到这一点，就像在<div class="page-wrapper">  <div class="container"> <header></header> <main> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p> <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. </p> </main> <footer></footer> </div> </div>以外的所有其他属性值一样，它可以安全地删除百分号，如果值为{ {1}}。尝试将百分比设置为除此之外的任何值，即flex-basis

Answer 2

您说您需要flex: 1 0 0%，因此您的布局适用于IE11

但是你的CSS预处理器正在剥离%。

简单的解决方案是不使用flex属性。

这是您引用的错误报告的标题：

flex shorthand declarations with unitless flex-basis values are ignored

它说“flex简写”。这是受影响的唯一财产。

然后写下：

解决方法是指定结束零的单位。

实际上，更好的解决方法可能是使用长手属性。

而不是：

flex: 1 0 0%

使用此：

flex-grow: 1
flex-shrink: 0
flex-basis: 0% / flex-basis: 0（两者都应在IE11中有效）

更多信息：

flex property not working in IE

了解无单位弹性基础

2 个答案: