两列高度相同，一列有两个元素

Question

我想要两列具有相同高度的布尔玛。

其他答案的问题是他们没有考虑到第二列需要分成两个堆栈。

为此我们可以做到：

.columns
  margin: 0 auto
  
  .column
    margin: 0 20px
    height: 25vh
    border-radius: 5px

.purple
  background: purple
  
.component
  display: flex
  flex-direction: column
  height: 100%
  
  .component__stack-2
    flex: 1
    max-height: calc(100% - 50px)
    overflow: scroll

<div class="columns">
  <div class="column purple">1</div>
  <div class="column">
    <div class="component">
      <div class="component__stack-1">first stack</div>
      <div class="component__stack-2">second stack</div>
    </div>
  </div>
</div>

https://codepen.io/wqsadqqqqqq/pen/qBjzjLP

我要的是让左边的列有100%的高度（垂直内容可以增长），而右边的列有两个div：

• 第一个 div 占用必要的空间
• 第二个 div 占用剩余的可用空间，如果内容溢出，则使其可滚动

使用 Bulma 框架的解决方案将是完美的，但使用纯纯 flexbox 也可以工作

Answer 1

试试这个方法： （我添加了颜色以更好地区分每个元素的界限）

CSS

  .columns
    margin: 0 auto
  
  .column
    margin: 0 20px
    height: 60vh
    border-radius: 5px


.purple
  background: purple
  
.component
  display: flex
  flex-direction: column
  gap:5vh
  background-color: red
  height:100%
  max-height:100%
  
  .component__stack-2
    flex:1
    background-color: blue
    overflow: scroll

  ::-webkit-scrollbar 
     display: none

我保留了相同的 html，您可以向每个组件堆栈添加更多内容，以查看此解决方案是否符合您的需求。

Answer 2

感谢question 我已经使用了flex-basis 和flex-grow

.columns
  margin: 0 auto
  
  .column
    margin: 0 20px
    height: 25vh
    border-radius: 5px

.column
  background-color: purple

.component
  display: flex
  flex-flow: column
  height: 100%
  
  .component__stack-2
    flex-basis: 0
    flex-grow: 1
    overflow-y: scroll

<div class="columns">
  <div class="column">1</div>
  <div class="column">
    <div class="component">
      <div class="component__stack-1">First stack here</div>
      <div class="component__stack-2">Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here Second stack here </div>
    </div>
  </div>
</div>