Question

我获得了一个页面布局，其中包含一个flex容器（带有列方向）和一个flex设置为1的flex项目。我需要将我的元素添加到此flex项目中。我希望将容器的高度固定在100％的flex项目div上 - 但问题是我的根容器的高度是动态的并且可以保持增长，并且flex项目的高度随着高度的增加而不断增长我的根容器。

我不想在我的容器上设置一个高度 - 无论如何我都要限制容器的高度。

这是我正在看的简化版本。 flex-container和flex-items已经给我了。 test-element是我需要放入页面的div，我需要限制test-element的高度以适应100％的flex-item。

＆＃13;

.flex-container {
  display: flex;
  width: 120px;
  height: 120px;
  background-color: pink;
  flex-direction: column;
}

.flex-item {
  background-color: yellow;
  flex: 1;
}

.flex-item.second {
  background-color: blue;
  flex: 0;
}

.test-element {
  background-color: green;
  flex-grow: 1;
  height: 150px;
  // doens't help
  overflow: hidden;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item first">
    <div class="test-element"></div>
  </div>
  <div class="flex-item second"></div>
</div>

＆＃13;

Answer 1

而不是在.test-element上设置固定高度，就像你有：

.test-element {
  background-color: green;
  flex-grow: 1;
  height: 150px;
  overflow: hidden;
}

使父（.flex-item.first）成为灵活容器。这将自动将align-items: stretch应用于子项（.test-element），从而使其扩展容器的整个高度。没有必要的固定高度。

＆＃13;

.flex-container {
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 120px;
  background-color: pink;
}

.flex-item {
  flex: 1;
  display: flex;   /* new; flex-direction: row, by default */
  background-color: yellow;
}

.test-element {
  flex-grow: 1;
  background-color: green;
}

.flex-item.second {
  flex: 0;
  background-color: blue;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item first">
    <div class="test-element"></div>
  </div>
  <div class="flex-item second"></div>
</div>

＆＃13;

使flex项目的子项不会超出flex项

1 个答案: