A parent div positioned absolutely not taking height of its children

Question

As the title suggests, I have a parent div that is positioned absolutely and I need its defined height to expand with the height of its child elements. Is this possible with css?

Here's a codepen of what I mean https://codepen.io/SeanPeterson/pen/paKqBg

.wrapper {
  background: blue;
  widht: 100%;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
    <div class="parent1">

    </div>
    <div class="parent2">
        <div class="child">
            <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non
                nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in,
                elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus.
                Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.Donec rutrum congue leo eget malesuada.
                Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis
                ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
                malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
        </div>
    </div>
</div>

Even though the div is visible, the parent's defined height in the browser does not correspond to the height of its child. Here's a screenshot of what I'm referring to.

The reason I'm trying to do this is so I can maybe use a flex box to match the height of parent1 and parent2 divs. But I can't achieve this without parent1 taking the height of its children.

Any help is appreciated!

Did you forget to set a positioning context...the parent container will need `position:relative`? Also, perhaps remove the `bottom` value. - https://codepen.io/Paulie-D/pen/eVKxry — Paulie_D, Feb 22 '18 at 17:09
That said, I'm not clear on what it is you are trying to achieve. What is this supposed to look like? — Paulie_D, Feb 22 '18 at 17:13
Thanks for the feedback @Paulie_D. I've updated the codpen to try and reflect better what I'm trying to achieve with parent1 and parent2 having equal heights. Although, before I get to that, I just want parent1 to have the height value of its children. Also the parent2 already has the position of absolute (or were you referring to the wrapper div?) — Sean Peterson, Feb 22 '18 at 17:21
What I *think* you are trying to do is this - https://stackoverflow.com/questions/38852811/create-a-row-of-flexbox-items-with-a-max-height-defined-by-one-child — Paulie_D, Feb 22 '18 at 17:25
Thanks @Paulie_D! Sorry I meant the children of parent2. And using the codepen post you made in your original comment (Removing bottom:0 ) I was able to achieve what I as after. If you make that an answer I'll mark it as the correct one! — Sean Peterson, Feb 22 '18 at 17:52

score 0 · Answer 1 · answered Feb 22 '18 at 18:02

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
      <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.

Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.

Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
    </div>
  </div>
</div>

.wrapper{
    height: 400px;
    width: 100%;
    background: #ddd;
    position: relative;
}
.parent2{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.child{
    color: #333;
    padding: 10px;
    background: #f5f5f5;
    margin: 40px;
}

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
        <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabit
    Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus susci.</p>
    </div>
  </div>
</div>

You Should Give Position: Relative To the Parent Div Of child Div Which one You Want to put as Absolute and Taking The 100% Height of This Parent Div Height.

.wrapper{
     position: relative;
}

By The Way, You Also Define The Fixed Height Of Your Parent Div, Like

.wrapper{
    height: 600px;
    position: relative;
}

score 0 · Accepted Answer · answered Feb 22 '18 at 19:43

Firstly make sure that your absolutely positioned parent2 div has a positioning context by setting position:relative to it's container.

Then remove the bottom:0 from parent2 and it will adjust its height to the content.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.wrapper {
  background: blue;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
      <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
        malesuada. Pellentesque in ipsum id orci porta dapibus.</p>
    </div>
  </div>
</div>

Note that due to the positioning, the wrapper will NOT take the height of the parent2 div into account. If you want to equalise heights of parent1 and parent2 you will need an alternate technique such as Create a row of flexbox items with a max height defined by one child.

score -1 · Answer 3 · answered Feb 22 '18 at 17:30

-1

clearfix

hope it helps you.

.parent2{
  background: red;
  position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 30%;
  clear: both;
  content: '';
  display:table;
}

answered Feb 22 '18 at 17:30

UnpassableWizard

1,237
11
20

A parent div positioned absolutely not taking height of its children

3 Answers3