Two columns with the same height with one column having two elements

Question

I would like to have two columns with bulma with the same height.

The problem with other answers is that they do not take into consideration that the second column needs to be separated into two stacks.

For that we can do:

.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

What I'm looking for is to have the column on the left 100% height (the vertical content can grow), while the column on the right side has two divs:

the first div takes the space necessary
the second div takes the rest of the space available and if the content overflows, makes it scrollable

A solution with Bulma framework would be perfect but using pure pure flexbox could work as well

Related if not a dupe - https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings — Paulie_D, Oct 05 '21 at 11:44

Sabshane · Answer 1 · 2021-10-05T12:15:27.520

Try this way: (I added colors to better distinguish the delimitations of each elements)

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

I kept the same html, you can add more content to each component stack to see if this solution fits your needs.

score 0 · Answer 2 · answered Oct 05 '21 at 12:32

Thanks to this question I have used flex-basis alongside with 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>

Two columns with the same height with one column having two elements

2 Answers2