将剩余的最大宽度 flexbox 项目水平居中 space

Question

我有一个相当独特的情况，似乎在所有浏览器中都有效，除了 Internet Explorer 11 似乎，所以这是我试图解决的主要用例。

我正在研究一个网站布局的想法，其中涉及利用 <body> 上的 display: flex; 来适应各种布局情况。具体来说，一个涉及到在侧面有一个 "navbar" 并且站点的内容在左边。在内容上使用 flex-grow: 1; 可以让我填充导航栏后剩余的 space，以及当我必须在某个特定位置隐藏导航栏时自动填充浏览器的整个宽度 window断点。

但是，如果我向内容添加 max-width 并尝试使用 margin: 0 auto; 将其置于剩余 space 的中心，它在 Internet Explorer 11 中失败.

Here is a working example of this problem.

/* 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);
}

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

最终，以下所有内容都是我正在努力的方向：

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

Answer 1

在 flex 布局方面，IE 11 充满了错误。但通常有解决方法。

在这种情况下，只需对您的 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

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

flex property not working in IE

将剩余的最大宽度 flexbox 项目水平居中 space

Horizontally center max-width flexbox item in remaining space

html

css

centering

flexbox