Question

是否可以让单行容器的flexbox实现的总高度等于特定容器的高度？我目前的基本CSS实现是：

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

使用以下HTML：

<div class="flex-container">
  <div class="left-container">
    stuff
  </div>
  <div class="right-container">
    some other stuff
  </div>
</div>

问题是，.right-container可以变得非常高，高度明智。因此，我想将.flex-container约束为.left-container的高度，无论它最终达到什么高度（我事先都不知道）。这样，.right-container最终会有一个滚动条。

这可能只通过CSS，或者我需要Javascript吗？如果它有帮助，我不一定要在这里使用flexbox，但我发现它在我的应用程序中使用最方便，除了这个高度问题。

Answer 1

＆＃13;

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width:300px;
  height:300px;
  border:1px solid #000;
}

.left-container{
  background-color:red;
  }
.right-container{
  background-color:green;
  }

＆＃13;

<div class="flex-container">
  <div class="left-container">
    stuff
  </div>
  <div class="right-container">
    some other stuff
  </div>
</div>

＆＃13;

Answer 2

如果您设置了3个元素的高度并在overflow-y上将scroll设置为.left-container，则应该这样做。

.flex-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      border: solid 1px grey;
      padding: 5px;
  height: 150px;
    }

    .left-container {
      border: solid 1px red;
      flex: 1;
      height: 150px;
    }

    .right-container {
      border: solid 1px blue;
        flex: 3;
      height: 150px;
      overflow-y: scroll;
    }

<div class="flex-container">
      <div class="left-container">
        stuff
      </div>
      <div class="right-container">
        some other stuff some other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuff
      </div>
    </div>

使一行CSS flexbox容器的高度为特定容器的高度

2 个答案: