CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height

Make absolute positioned div expand parent div height

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

Update 2022: Nowadays one might use CSS flexbox[1] or grid[2] to reverse the visual order of HTML elements inside a parent container without using position: absolute;.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
2. https://developer.mozilla.org/en-US/docs/Web/CSS/grid or
   Reverse order of columns in CSS Grid Layout

CSS absolute positioning is not moving to parent, the parent is relative

In your css, if your parent has no content other than the absolute position child div, then the parent has a 0 height declaration - so you have to set the height of the parent div in pixels in order to give it a place in the DOM.

Why absolute parent get child height while relative parent doesn't?

That's because, as explained in this answer, floats are ignored when calculating the height of "normal" blocks:

Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored […])

And position: relative does not change this.

However, position: absolute produces a Block Formatting Context. For those,

If the element has any floating descendants whose bottom margin edge
is below the element's bottom content edge, then the height is
increased to include those edges.

How can I do an absolute div (with some content inside) stretched to its parent div?

There are two things you need to do:

1. Give the parent a position of anything other than static (the default)
2. Give the parent a width and height

Then simply give the absolutely-positioned child a relative width and height.

This can be seen in the following:

.parent {  position: relative;  background: red;  width: 200px;  height: 200px;}
.absolute {  position: absolute;  background: blue;  top: 50px;  left: 50px;  width: 100%;  height: 100%;}

<div class="parent">  <div class="absolute"></div></div>

.floating-bar {  position: absolute;  z-index: 1;  background-color: lightblue;  height: 50px;  padding: 5px;}.button-menu {  max-width: 200px;  background-color: yellow;  padding: 10px;  position: absolute;  z-index: 2;  display: none;  width: max-content;  width: -moz-max-content;}.button {  background-color: blue;  color: white;  width: 35px;  height: 50px;}.button:hover + .button-menu {    display: block;}

<div class="floating-bar">    <div class="button">A</div>    <div class="button-menu">      <ul>        <li>Lorem ipsm dolor sit amet</li>        <li>Lorem ipsm dolor sit amet</li>        <li>Lorem ipsm dolor sit amet</li>      </ul>    </div></div>