Flexbox有很多嵌套的孩子

Question

我已經閱讀了很多關於flexbox的文章，但是仍然有一個困擾我的問題。 我想按照本指南使用flexbox粘貼頁腳。

但是然后，在我的頁面內容中，我希望擁有盡可能多的嵌套div並使它們采用與父級相同的高度。

問題是，設置height: 100%啟用flexbox時，每個孩子的height: 100%設置height: 100% （就像我在非flexbox場景中所做的那樣）。 這導致孩子的身高增加（父母過多）。

為了使這一點更清楚，這里是一個沒有flexbox的codepen

和帶有Flexbox的Codepen

您可以在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 ？

換句話說，是否有任何方法可以在樹的某個點“停止彈性傳播”，以便所有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>