Контейнерный div не расширяется, чтобы соответствовать дочернему div (без поплавков)

Question

Мой контейнер div не расширяется, чтобы соответствовать его дочернему div - который имеет верх: 20px значение. У меня даже нет поплавков, и я использовал оба переполнения: скрытый (разрезает часть дочернего div) или переполнение: auto (создает полосы прокрутки).

См codepen пример: Codepen

<div class="container"> 
<div id="model">fdsf</div> 
</div> 

Цените любые решения этой проблемы.

Answer 1

Удалить top и position свойства и использовать margin: 10px auto 0 auto;

#model { 
    background: yellow; 
    border: 1px solid orange; 
    width: 100px; 
    height: 100px; 
    margin: 10px auto 0 auto; 
    display: block; 
} 

Demo

Answer 2

1) В вашем примере, контейнер расширяется, чтобы соответствовать ребенку div правильно. Высота ребенка равна 100px плюс в два раза граница 1px, всего 102px. Тогда высота контейнера составляет ровно 102px, как могут сказать вам инструменты разработчика в любом браузере.

Высота содержимого составляет 102px, при этом внутренняя высота контейнера составляет 102px. Это по определению «расширяется, чтобы соответствовать содержимому».

2) Теперь вы устанавливаете position: relative для своего дочернего div. Следующая цитата из Mozilla Developer Network должна дать полное объяснение тому, что происходит в вашем примере.

Относительное позиционирование:

Это ключевое слово выкладывает все элементы, как если бы элемент не были расположены, а затем отрегулировать положение элемента без изменения раскладку (и, таким образом, оставляя зазор для элемента, где его было бы , если бы оно не было расположено). Эффект позиции: относительный на Таблица - * - группа, таблица-строка, столбец таблицы, таблица-ячейка и заголовок таблицы элементов не определены.

3) Очевидно, что вы можете избавиться от этого эффекта, избавившись от относительного позиционирования, и только с помощью margin вместо этого. Что касается вашего комментария, нет, top, right, bottom и left не должны абсолютно не работать. Они предназначены для использования совершенно по-другому, что объясняет приведенная выше цитата.