How to stretch full height div inside container the scroll?-CodePudding

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 >
  <div >
    <div >1</div>
  </div>
  <div >
    <div >2</div>
  </div>
  <div >
    <div >3</div>
  </div>
  <div >
    <div >4</div>
  </div>
</div>

CodePudding user response：

If I get you right, then

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Scroll flex</title>
    <style>
      .another-container {
        height: 300px;
        overflow-y: scroll;
      }
      .container {
        display: flex;
      }
      .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;
      }
    </style>
  </head>
  <body>
    <div >
      <div >
        <div >
          <div >1</div>
        </div>
        <div >
          <div >2</div>
        </div>
        <div >
          <div >3</div>
        </div>
        <div >
          <div >4</div>
        </div>
      </div>
    </div>
  </body>
</html>

Your solution does not work as intended because you set the height of your flex container explicitly, as @XiaoGuang pointed out. None of flex items could be greater than the container itself. So first step is to remove the height property and let the flex container to become as tall as the tallest flex item. After that, if you still need scrolling, just add another container for that.

CodePudding user response：

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 >
  <div >
    <div >1</div>
  </div>
  <div >
    <div >2</div>
  </div>
  <div >
    <div >3</div>
  </div>
  <div >
    <div >4</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >1</div>
  </div>
  <div >
    <div >2</div>
  </div>
  <div >
    <div >3</div>
  </div>
  <div >
    <div >4</div>
  </div>
</div>

And that's basically it.