Добавление поля в div с переполненным потомком

Question

У меня проблема с тем, что я пытаюсь добавить нижнее поле в элемент div, у которого дочерний элемент переполняет высоту. Элементы Dom попадают прямо под родительский div, когда они покрываются дочерним div, но я хочу, чтобы элементы dom попадали под дочерний div. Дизайн, который я ищу, выглядит так:

------------------------------
|                             |
|          Parent             |
|  -------------------------  |
|__|_______________________|__|
   |                       |
   |       child           |
   |_______________________|
 /* ------margin -------- */
 content

Я попытался добавить еще один div, окружающий все это с height: fit-content, но это только делает высоту равной родительскому div, а не в том числе ребенок div. Есть какой-либо способ сделать это?

Answer 1

Я не думаю, что вы можете сделать это без изменения вашей структуры. По сути, это то, что означает «переполнение».

Я бы попытался сделать так, чтобы ваши "родители" и "дети" родились в общем родителе. Расположите их так же, как сейчас, без переполнения. Затем содержимое под ним будет правильно выровнено, и вы можете использовать поле.

Как-то так (отступы не актуальны, только для иллюстрации):

#new-parent {
  border: 1px solid red;
  margin-bottom: 2rem;
}

#old-parent {
  background: orange;
  padding: 2rem;
}

#old-child {
  background: lightblue;
  margin: -2rem 2rem 0 2rem;
  padding: 3rem;
}

#content {
  background: lightgray;
  padding: 1rem;
}

<div id="new-parent">
  <div id="old-parent">
    old-parent
  </div>
  <div id="old-child">
    old-child
  </div>
</div>

<div id="content">
  rest of the content
</div>