html - Flexbox 许多嵌套的 child

Question

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

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

问题是，在每个子元素上设置 height: 100%(就像我在非 flexbox 场景中所做的那样)在启用 flexbox 时会有所不同。这导致 children 变得更高(溢出 parent )。

为了使这一点更清楚这里是一个codepen without flexbox

和一个codepen with 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 都得到父高度而不会溢出？

Answer 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>