小编典典

如何使Flexbox子代的父母身高达到100%?

css

我正在尝试在Flexbox中填充Flex项目的垂直空间。

.container {

  height: 200px;

  width: 500px;

  display: flex;

  flex-direction: row;

}

.flex-1 {

  width: 100px;

  background-color: blue;

}

.flex-2 {

  position: relative;

  flex: 1;

  background-color: red;

}

.flex-2-child {

  height: 100%;

  width: 100%;

  background-color: green;

}


<div class="container">

  <div class="flex-1"></div>

  <div class="flex-2">

    <div class="flex-2-child"></div>

  </div>

</div>

flex-2-child 不能满足要求的高度,但以下两种情况除外:

  1. flex-2 的高度为100%(这很奇怪,因为弹性商品默认情况下为100%,而且在Chrome中存在错误)
  2. flex-2-child 绝对位置也不方便

目前,该功能不适用于Chrome或Firefox。


阅读 527

收藏
2020-05-16

共1个答案

小编典典

采用 align-items: stretch

与David Storey的答案类似,我的解决方法是:

.flex-2 {
    display: flex;
    align-items: stretch;
}

或者到align-items,你可以使用align-self只是在.flex-2-child你想拉长项目。

2020-05-16