Flexbox 许多嵌套的孩子答案

【问题标题】：Flexbox many nested childrenFlexbox 许多嵌套的孩子
【发布时间】：2015-12-20 22:30:48
【问题描述】：

我已经阅读了很多关于 flexbox 的帖子，但仍有一个问题困扰着我。我想根据this guide 使用flexbox 有一个粘性页脚。

但是，在我的页面内容中，我希望有尽可能多的嵌套divs 我喜欢并让它们与父级的高度相同。

问题是，在启用 flexbox 时，为每个孩子设置 height: 100%（就像我在非 flexbox 场景中所做的那样）的工作方式不同。这会导致孩子变得更高（溢出父母）。

您可以在 flexbox 场景中看到，即使我不希望页脚变成绿色背景。

HTML：

<div class="sticky-footer-container">
  <div class="sticky-footer-content">
    <div class="page-container">
      <div class="main-menu">
        <div class="main-menu-selection">
          <div class="main-menu-selection-text">
            <div class="some-other-class">
              Some text
            </div>
          </div>
        </div>
        <div class="main-menu-selection">
          <div class="main-menu-selection-text">
            <div class="some-other-class">
              Some text
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="sticky-footer">
    Some footer content
  </div>
</div>

SCSS：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: silver;
  padding: 0;
  margin: 0;
}

.sticky-footer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .sticky-footer-content {
    height: 100%;
    background: blue;
    flex: 1;
    div {
      height: 100%;
    }
    .main-menu-selection {
      height: 50%;
    }
  }
}

.some-other-class {
  background: green;
}

为了解决这个问题，任何嵌套的 div 都必须变成 flex-container ？

换句话说，有没有办法在树的某个点“停止 flex 传播”，所以所有的 div 都获得父高度而不会溢出？

【问题讨论】：

您提供的示例似乎并不能说明您所说的问题

标签： html css flexbox sticky-footer

【解决方案1】：

display:flexbox 不是真正的有效值 :)

您还需要设置高度并最终从 html 继承它：

.sticky-footer-container {
  display: flex;
  flex-direction: column;
}

.sticky-footer-content {
  flex: 1;
}
/* let's inherit some height to pull the footer down */
html,
body,
.sticky-footer-container {
  height: 100%;
  margin: 0;
}

.sticky-footer {
  display: flex;/* flex item can be flexboxes as well */
  background: turquoise;
  align-items: center;
  justify-content: center;
  min-height: 3em;
}

<div class="sticky-footer-container">
  <div class="sticky-footer-content">
    <div class="page-container">
      <div class="main-menu">
        <div class="main-menu-selection">
          <div class="main-menu-selection-text">
            <div class="some-other-class">
              Some text
            </div>
          </div>
        </div>
        <div class="main-menu-selection">
          <div class="main-menu-selection-text">
            <div class="some-other-class">
              Some text
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="sticky-footer">
    Here my footer
  </div>
</div>

【讨论】：