parent Does an HTML child element grow to the height of its overflow parent?

WillD
May 17, 2023
247 views
5 votes
5 Answers

Consider the following. I have a overflow auto div whose content outgrows its height. I then have an absolute position div (red background) that I would like to run the entire height of the scrollable div. In other words I want it to extent to the bottom of where the text stops, but right now it stops at the bottom the initially-visible text only. In other words how can the red div (.b) extend to the bottom of the scrolling distance. Any way I can do this with CSS?

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  position: absolute; 
  top: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b"></div>
</div>

Ideal solution will be CSS-only and not rely on refactoring the HTML layout.

Tags: css html

Answers

One possible way is with a grid and setting grid-row, see example below, now without refactoring

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.b {
  position: absolute;
  grid-row: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test
  <div class="b"></div>
</div>

Of cause, this is a bad idea if you dont just have "test test test" in your div, but actual content with other html elements, which will then break the grid. The "secure" solution requires adding one wrapper div (original solution posted, before question was altered)

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.t {
  grid-row: 1/1;
  grid-column: 1/1;
}

.b {
  grid-row: 1/1;
  grid-column: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

<div class="a">
  <div class="t">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test
  </div>
  <div class="b"></div>
</div>

The problem with your current structure is that the height of a is fixed at 80vh and the height of b is 100% of a, which means also 80vh.

If you are open to changing the HTML a bit, you can fix this by allowing the height of a to be auto (default) and instead wrapping a in a container element that has a fixed height with overflow scroll. This way the height of a will be the full height of the content and the height of b will also be the full height of the content.

Here’s an example:

.container {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.a {
  position: relative;
}

.b {
  height: 100%;
  position: absolute;
  top: 0;
  width: 10px;
  background: red;
}

<div class="container">
  <div class="a">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    <div class="b"></div>
  </div>
</div>

- Stokely
- May 17, 2023 at 10:18 pm
- 0 votes
0
Add min-height:100% to your div and set height:auto. This will stretch your color to full hieght, but also grow as your text grows past 100% height.

Login or Signup to reply.

An idea with sticky position but it only works if you know the value of height because you need it for margin-top

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  margin-top: -80vh; /* you need the opposite of height here */
  position: sticky; 
  bottom: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b"></div>
</div>

If extra <div> will not be so critical, then add it:

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.extra {
  position: relative;
}

.b {
  height: 100%;
  position: absolute; 
  top: 0;
  width: 10px;
  background: red;
}

<div class="a">
  <div class="extra">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    <div class="b"></div>
  </div>
</div>

There is another crazy option, but it is unlikely to be appropriate in the context of your task:

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  position: absolute; 
  top: 0;
  left: 0;
}

.b:before {
  content: attr(data-text);
}

.b:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b" data-text="test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test"></div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.