时间戳

首页 > 解决方案 > FlexBox - 给定高度 100% 时，嵌套 div 不会填充其父级

javascript - FlexBox - 给定高度 100% 时，嵌套 div 不会填充其父级

问题描述

.container {
  height: 100vh;
  width: 500px;
  border: 1px solid black;
}

.layout {
  display: flex;
  min-height: 100%;
  background-color: blue;
  flex-direction: column;
}

.header {
  height: 50px;
  background-color: orange;
}

.main {
  flex-grow: 1;
  background-color: red;
}

.main-child {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

.footer {
  justify-self: flex-end;
  background-color: purple;
}

<div class="container">
  <div class="layout">
    <header class="header">
      <input/>
    </header>
    <main class="main">
      <div class="main-child">
        <p>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
        </p>
        <p>
        My Question, why isn't the yellow part the full size of the red part?
        </p>
      </div>
    </main>
    <footer class="footer">
      <p>
        Texty texty text
      </p>
    </footer>
  </div>
</div>

我的嵌套 div，main-child高度为 100%，但它不会填充父 div（它位于 flex 框内，并使用 flex-grow 调整大小）。我希望孩子扩大到其父母的填充大小。

我怎样才能解决这个问题？

JSFiddle

标签： javascripthtmlcssflexbox

解决方案

.main {
  flex-grow: 1;
  background-color: red;
  display: flex;
}

.main-child {
  flex: 1;
  width: 100%;
  background-color: yellow;
}

推荐阅读