How Can I Make an Absolutely Positioned Div Expand its Parent's Height?

Absolute Positioning and Parent Div Height

This question explores the challenge of making an absolutely positioned div expand the height of its parent div. The author presents a scenario where they want a child div (child2) to be positioned before another child div (child1) on both desktop and mobile devices. To achieve this, they use absolute positioning on child2.

However, the author notes that absolute positioned elements are removed from the normal document flow, meaning they are ignored by other elements. This poses a problem when trying to expand the parent div's height to accommodate the dynamic height of child2.

The author attempts to solve the issue using overflow:hidden on the parent div and the clearfix hack, but to no avail. They conclude that either fixed heights must be used or JavaScript is required to reposition the divs.

As an alternative, the author suggests using CSS flexbox or grid layout, which allows for reversing the visual order of HTML elements within a parent container without resorting to absolute positioning.

The above is the detailed content of How Can I Make an Absolutely Positioned Div Expand its Parent's Height?. For more information, please follow other related articles on the PHP Chinese website!