CODEWITHSUNDEEP
htmlcss
tranthaihoang
tranthaihoang

Reputation: 491

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>

Upvotes: 0

Views: 1032

Answers (3)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

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>

Upvotes: 1

Yuri
Yuri

Reputation: 96

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 class="another-container">
      <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>
    </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.

Upvotes: 1

Jos&#233; A. Zapata
Jos&#233; A. Zapata

Reputation: 1297

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.

Upvotes: 0

Related Questions