在剩余空间中水平居中最大宽度的 flexbox 项答案

【问题标题】：Horizontally center max-width flexbox item in remaining space在剩余空间中水平居中最大宽度的 flexbox 项
【发布时间】：2017-05-29 03:34:22
【问题描述】：

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

我正在研究一个网站布局的想法，其中涉及在<body> 上使用display: flex; 来适应各种布局情况。具体来说，其中包括在侧面有一个“导航栏”，在左边有网站的内容。在内容上使用flex-grow: 1; 可以让我填充导航栏之后的剩余空间，以及当我必须在某个断点处隐藏导航栏时自动填充浏览器窗口的整个宽度。

但是，如果我将max-width 添加到内容并尝试使用margin: 0 auto; 将其置于剩余空间的中心，则在 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>

最终，我正在努力实现以下所有目标：

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

【问题讨论】：

标签： html css flexbox centering

【解决方案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

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

【讨论】：