How to create two divs with same height, one of them with vertical scroll

Question

I'd like to have this layout, using only css:

<div id="container">
  <div id="base-height">
    <pre>
      some
      items
      with dynamic height
    </pre>
  </div>
  <div id="with-scroll">
    some other content with vertical scroll, if it is higher than div#base-height
  </div>
</div>

div#container should have the same height as div#base-height. div#base-height and div#with-scroll should be displayed side by side. If div#with-scroll is higher than div#base-height, it should have vertical scroll.

Position `.container` relative, and then position `#with-scroll` absolute, with top and bottom set to 0. Then `#base-height` alone will determine the height of the container, and `#with-scroll` will get its height _from_ the container. — CBroe, Nov 08 '22 at 13:02

score 0 · Answer 1 · answered Nov 08 '22 at 13:05

<div id="container">
  <div id="base-height" class = "same-height">
    <pre>
      some
      items
      with dynamic height
    </pre>
  </div>
  <div id="with-scroll" class = "same-height">
    some other content with vertical scroll, if it is higher than div#base-height
  </div>
</div>

CSS

    .same-height {
      height: 100px;
      width: auto;
      border: 1px solid black;
    }
    
    #with-scroll {
      overflow-y: scroll;
    }

fiddle https://jsfiddle.net/8ph4qarL/

How to create two divs with same height, one of them with vertical scroll

1 Answers1