我想要两根柱子高度相同的柱子。

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

我们可以这样做:

.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框架的解决方案是完美的，但使用pure pure flexbox也可以工作

顺晟科技：

尝试这样做： （我添加了颜色以更好地区分每个元素的分隔符）

CSS

.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>

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

多亏了我与

.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>