Позиционирование формы с абсолютным позиционированием внутри элемента с абсолютным позиционированием

Question

Я пытаюсь расположить форму с абсолютным позиционированием внутри элемента с абсолютным позиционированием

<div style="position: relative; background-color: white;width: 639px;height: 626px;">
  <div style="position: absolute;height: 442px; width: 639px; top: 184px; background-color: #F1F1F1">
    <form style="width: 100%;height:100px;position: absolute; margin: 42px 48px auto 48px; background-color: green" >
    </form>   
  </div>
</div>

Fiddle: https://jsfiddle.net/flamant/7u9kz6xc/10/

Но зеленая форма превосходит ее родитель вместо того, чтобы оставаться внутри своего родителя. Почему? Если бы вы могли дать мне подробное объяснение, спасибо

Answer 1

Зеленый блок превышает родительскую ширину, потому что он имеет ширину 100%, и вы должны добавить ширину поля, равную 48px.

Если вы хотите остановиться в конце родительского элемента, просто измените свойство ширины на:

width: calc(100% - 48px);

Если вы хотите иметь одинаковое расстояние слева и справа, удвойте его:

width: calc(100% - 96px);

Вот рабочий живой кодовый указатель: https://codepen.io/alezuc/pen/RwWrpKV