水平边距超出 flexbox 中的父 div

【问题标题】：Horizontal Margins going outside of parent div in flexbox水平边距超出 flexbox 中的父 div
【发布时间】：2018-07-20 12:59:03
【问题描述】：

我在使用 flex 时的边距出现了一些意外行为，我希望得到一些帮助以了解原因。

我有一些像这样的简单 html：

<div className="dashboard">
    <div className="dashboard__inner-container">Inner Container</div>
</div>

我的 scss 文件如下所示：

.dashboard {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: #f4f6f8;
}

.dashboard__inner-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  width: 100%;
  margin: 100px 50px;
}

我所期待的是内部容器将完全填满父容器，上下减 100px，左右减 50px。垂直边距按预期工作，但水平边距实际上延伸到父 div 之外，因此内部容器似乎仍然占据了父 div 的整个宽度。

我不确定这是否与 flexbox 有关。

这是一个独立的 CodePen https://codepen.io/MaxMillington2/pen/EQWZoj

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

当使用align-items: center 和column 方向时，项目将折叠到其内容宽度，而不是默认的stretch，这使它填充其父级的宽度。

另外，当设置width: 100% 为inner 时，它会覆盖默认的stretch，这将使该项目为父级宽度的 100% + 边距。

对于预期的输出，删除outer 上的align-items: center 和inner 上的width: 100%。

堆栈sn-p

html {
  height: 100%;
  overflow: auto;
}

.outer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #f4f6f8;
  height: 100%;
}

.inner {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  text-align: center;
  margin: 100px 80px;
}

<div class='outer'>
  outer
  <div class='inner'>
    inner
  </div>
</div>

【讨论】：