Question

我有一个相当独特的情况，看起来似乎适用于所有浏览器，除了 Internet Explorer 11 ，所以这是我试图解决的主要用例。

我正在研究一个网站布局的想法，该布局涉及在display: flex;上使用<body>以适应各种布局情况。具体来说，一个涉及到一个＆＃34; navbar＆＃34;在旁边和网站的内容在左边。在内容上使用flex-grow: 1;允许我填充导航栏后的剩余空间，并且当我必须在某个断点处隐藏导航栏时自动填充浏览器窗口的整个宽度。

但是，如果我向内容添加max-width并尝试使用margin: 0 auto;将其置于剩余空间内，则会在 Internet Explorer 11 中失败。

Here is a working example of this problem.

＆＃13;

/* Code to Troubleshoot
// ----------------- */

body {
  display: -webkit-flex;
  display: flex;
}
nav {
  -webkit-flex-basis: 160px;
  flex-basis: 160px;
  z-index: 2;
}
main {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  min-width: 1px;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1;
}
/* Presentational Styles
// ------------------ */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 300;
  color: #bbb;
  background-color: #eaeaea;
}
nav,
main {
  height: 100vh;
  background-color: #fff;
  box-shadow: 0 0.15em 0.65em rgba(0, 0, 0, 0.15);
}
nav {
  counter-reset: linkCount;
}
nav i {
  display: block;
  border-bottom: 1px solid #eaeaea;
  padding: 0.925em 1em;
  font-style: normal;
  line-height: 1;
}
nav i:before {
  counter-increment: linkCount;
  content: "Link " counter(linkCount);
}
main:before {
  content: "Main Content";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

＆＃13;

<nav>
  <i></i>
  <i></i>
  <i></i>
</nav>
<main></main>

＆＃13;

最终，以下所有内容都是我努力的目标：

内容区域始终填充导航栏后的剩余空间（如果导航栏隐藏在特定断点处，将继续自动填充）。
需要能够在内容区域分配可选的max-width，并将内容置于<body>的剩余空间内。目前我尝试通过margin: 0 auto;对内容进行此操作，该内容适用于除 Internet Explorer 11 之外的所有浏览器（我尚未在移动设备上测试，但所有其他桌面浏览器似乎是有序的。）
如果内容区域变得足够小，则需要正常收缩。

Answer 1

在flex布局方面，IE 11充满了bug。但通常有办法绕过它们。

在这种情况下，只需对main元素进行这两项调整：

main {
  flex: 1 1 auto;     /* 1 */
  position: relative;
  min-width: 1px;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1;
  width: 100%;        /* 2 */
}

revised fiddle

我根据这两个帖子进行了调整：

在剩余空间中水平居中最大宽度flexbox项目

1 个答案: