Make a flex column of a height of its sibling column

Question

I have two flex columns with some content. I want the first column height to always be equal to the height of the second column, and use overflow: auto if it ha

Answer 1

Here is an idea I used in a previous question where you can rely on the min-height:100%;height:0; trick. The height:0 will force the element to not affect the height of the container and min-height:100% will force it to be equal to the height defined by the sibling element:

.cover {
  height:0;
  min-height: 100%;
  overflow-y: auto;
}

.content-1 {
  height: 500px;
  background-color: green;
}

.content-2 {
  height: 150px;
  background-color: blue;
}