'How to stretch full height div inside container the scroll?

I want div.line with border black like below code to have full height in container scroll.
When there is an element that is too long, for example, line number 4 the borders will be shortened, with no height until the end.
Is there a way for the elements inside the scroll container to always be the same height as the tallest element? Thanks, everyone!

.container {
  display: flex;
  align-items: stretch;
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% / 4);
  border-left: 1px solid #000;
  padding: 0 16px;
}

.item {
  height: 100px;
  background: blue;
  color: white;
  padding: 16px;
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}
<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>
htmlcss


Solution 1:[1]

You should use grid in this case instead of flex. Take a look at comments in code for more details.

.container {
  display: grid; /* change to grid */
  grid-template-columns: repeat(4, 1fr); /* create 4 columns */
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% - 16px * 2); /* full width column */
  border-left: 1px solid #000;
  padding: 0 16px;
}

.item {
  height: 100px;
  background: blue;
  color: white;
  padding: 16px;
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}
<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>

Solution 2:[2]

Since your .line divs also contain an item, you need to make them flexboxs as well, and then make the item grow to the full height. Something like this:

.container {
  display: flex;
  align-items: stretch;
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% / 4);
  border-left: 1px solid #000;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

.item {
  background: blue;
  color: white;
  padding: 16px;
  flex-grow: 1;     
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}
<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>

And that's basically it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yaroslav Trach
Solution 2 José A. Zapata

Related Questions