Equal Height Divs (Two Column)

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {  display: grid;  grid-auto-flow: column;  gap: 5%;}
.col {  border: solid;}

<div class="row">  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>

How can I make a two-column layout have equal height columns with one scrollable?

Since the width is known you can consider position:absolute for the content so it doesn't affect the height and simply stretch it using top:0;bottom:0;

.gridwrapper {  display: grid;  grid-template-columns: 0.5fr 1.5fr;  grid-auto-rows: 200px;  grid-gap: 10px;  grid-template-rows: auto;}
.column {  background: green;  position:relative;}
.dynamic-content {  display: flex;  justify-content: center;  align-items: center;  height: 300px;  background: pink;  margin: 20px;}
.list {  position:absolute;  overflow-y: auto;  margin: 20px;  top:0;  bottom:0;  left:0;  right:0;}
.item {  height: 50px;  background: yellow;  border: 2px solid black;}

<div class="gridwrapper">      <div class="column">        <div class="list">          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>          <div class="item"></div>        </div>  </div>  <div class="column">    <div class="dynamic-content">Some dynamic content with random height</div>  </div></div>

Make 2 columns the same height with flexbox

Update answer: As I understand, what you want is the height of 100vh for the .wrapper, which has 2 columns inside it. And everywhen one of each column getting too long (longer than 100vh), its behavior becomes scroll instead of make its parent scroll. Here's the code after refining, give it a look to see if that's what you want. What I do are:

.wrapper has a specific height of 100vh
each column inside .wrapper has the max-height: 100%
When the column's content height getting longer than .wrapper's height, its behavior becomes scroll, by overflow-y: auto.

You can read more about overflow at here to see what's the difference between overflow: auto, overflow: scroll and overflow: visible (default), which I have struggled while seeking for this answer).

body {  margin: 0;  padding: 0;}
.wrapper {  display: flex;  height: 100vh;}
.col {  outline: 1px green solid;  max-height: 100%;  overflow-y: auto;  width: 120px;}

<div class="wrapper">  <div class="col">... little content... </div>  <div class="col">..Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.... </div></div>

Make a HTML with two columns of equal height and one of them scrollable

Here is the solution using CSS:

table {  position: relative;}
td {  background: red;  width: 200px;}
.column2>div {  height: 100%;  overflow: auto;  position: absolute;  top: 0;  width: 200px;}

<table>  <tr>    <td class="column1">      <div> a<br> a<br> a<br> </div>    </td>    <td class="column2">      <div> b<br> b<br> b<br> b<br> b<br> b<br> </div>    </td>  </tr></table>