-1

Here I was trying to set the parent height as how much height of children, but something is failing.

#parent {
  background-color: red;
}

#child {
  background: blue;
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<div id="parent" style="clear: both; z-index:2;padding: 1rem 1rem;border-radius: 1.25rem;" class="py-2 shadow">
  <div id="child" class="d-flex justify-content-center position-absolute">
    child
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
OKMokUp12
  • 11
  • 3
  • Absolute positioning - here applied via the `position-absolute` class - takes an element out of the normal layout flow; it can not influence the height of its parent any more. – CBroe Sep 27 '22 at 10:19
  • Please tag your Bootstrap version. – isherwood Sep 27 '22 at 12:52

1 Answers1

0

For height parent = max height with of all children you can use:

height: max-content;

but in your code you use absolute so it can not influence the height of parent

THKD
  • 36
  • 4