how to make 2 column equals shortest one in bootstrap 4

Question

in this example: i want the yellow column (which has longer content), to be equals to green column. and make overflow: scroll to first one.

USING CSS ONLY, NO JS

.long {
  background-color: yellow;
}

.short {
  background-color: green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-6 long">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias delectus ea mollitia perferendis veniam modi eligendi suscipit ipsum repellendus fugit reprehenderit ducimus fugiat excepturi, unde laborum deserunt commodi quis sit. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Molestias delectus ea mollitia perferendis veniam modi eligendi suscipit ipsum repellendus fugit reprehenderit ducimus fugiat excepturi, unde laborum deserunt commodi quis sit.
  </div>
  <div class="col-6 short">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias delectus ea mollitia perferendis veniam modi eligendi suscipit ipsum repellendus fugit reprehenderit ducimus fugiat excepturi, unde laborum deserunt commodi quis sit.
  </div>
</div>

So, you want the column with the longest content to be equal to the one with the shortest content? — Vasilis G., Aug 22 '20 at 14:21
you should set max-height (max-height: 50px;) to .col-6 and then set overflow-y: scroll; — Ehsan, Aug 22 '20 at 14:40

how to make 2 column equals shortest one in bootstrap 4

0 Answers0