css 元素未扩展以填充父Flex div

oknwwptz 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(145)

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

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #2D4256;
}

.nav-centre {
  margin: 0 auto;
  width: 40%;
  height: 100%;
}

.nav-container {
  display: flex;
  height: 100%;
  align-items: center;
  /* vertically centre */
}

.nav-item {
  color: white;
  width: 40px;
  text-align: center;
}

.main-content {
  height: calc(100% - 50px);
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow-y: overlay;
  display: flex;
  justify-content: center;
}

.main-wrap {
  width: 40%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.box {
  width: 200px;
  height: 200px;
  background: white;
  border: 1px solid black;
  margin: 10px;
}

<body>
  <div class="navbar">
    <div class="nav-centre">
      <div class="nav-container">
        <div class="nav-item">1</div>
        <div class="nav-item">2</div>
        <div class="nav-item">3</div>
        <div class="nav-item">4</div>
      </div>
    </div>
  </div>
  <div class="main-content">
    <div class="main-wrap">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

main-wrap div没有扩展到填充父main-content div，如何使main-wrap元素扩展到父元素的全高？
https://codepen.io/woooof/pen/VwBLprj

css

来源：https://stackoverflow.com/questions/74894177/element-does-not-expand-to-fill-parent-flex-div

1条答案

按热度按时间

jqjz2hbq1#

默认情况下，.main-wrapper将获得display:block，这与display:flex父对象不匹配。
要从父元素中获取值，可以使用display: inherit。一旦这样做了，里面的元素将不考虑它们的宽度。要解决这个问题，必须 Package 元素，要使其成为总高度，可以使用max-content。

.main-wrapper {
  display: inherit;
  flex-wrap: wrap;
  height: max-content;
}

结果：

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-24

我来回答

css 元素未扩展以填充父Flex div

1条答案

相关问题

热门标签

最新问答