I am trying to make two sibling div elements the same height. The of them has an overflow-y and a scrollbar with variable height content. The main div has content that is also variable height depending on dynamic content and browser width. The main content div should show all its content. The left scrolling panel should be equal height to the main content and no matter the browser width or height of content, hence the scrolling bar.
Previously, I would have used jQuery, detect window width change and adjust accordingly. But I am trying to do it in a React app.. so ideally it would be CSS only. Is this possible?
HTML:
<div class="parent"><div class="panel-with-scroll"><div class="panel-inner"><p>panel with scroll</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p><p>..</p></div></div><div class="content"><p>content panel</p></div></div>CSS:
.parent { width: 600px; display: flex;}.panel-with-scroll { width: 200px; height: 400px; overflow-y: scroll; background: pink;}.content { background: yellow; width: 400px; height: 300px;}An example of the mark-up and css is here at JSBIN: