CODEWITHSUNDEEP
css
Ingvi Jónasson
Ingvi Jónasson

Reputation: 752

CSS solution equal height 2 columns where smaller column wins?

I have two columns. A sidebar with a long navigation and main content. The sidebar will always have more height than the main content. I want the sidebar to have the equal height to the main column. The sidebar will have overflow-y: scroll and should not be higher than the main content. I can not use height or max-height as the content of the main content will vary and therefore I do not know the height.

I was hoping to find a solution with the new CSS Grid but I have not really figured it out.

Note I am aware that this can be achieved relatively easy with a script but am hoping to find a CSS solution to this.

fiddle

Upvotes: 0

Views: 26

Answers (1)

dave
dave

Reputation: 64657

You can just do:

aside {
  height: 100%;
  overflow-y: scroll;
}

ul {
  height: 0;
  overflow: visible;
}

https://jsfiddle.net/4kxxsjwa/19/

Upvotes: 1

Related Questions