Почему position: absolute вылезает за предел родителя position: relative?

Question

[alexarchibasov]

Есть три блока:

<div class="parent">
         <div class="container">
             <div class="child"></div>
         </div>
    </div>

Они имеют следующие стили:

.container{
min-width: 320px;
max-width: 1185px;
margin: 0 auto;
}

.parent{
position: relative;
width: 100%;
height: 100%;
}

.child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Всё работает, как нужно, пока ширина экрана не становится меньше 320px, сразу же появляется полоса прокрутки, а контент в блоке .child вылезает за пределы.

В чём может быть дело?

Comments

[Ankhena]

Вы же сами пишете min-width: 320px для container.
Вот и полоса прокрутки.

Answer 1

[hzzzzl]

пока ширина экрана не становится меньше 320px

ну так у контейнера min-width: 320px, потому и полоса прокрутки, что .child будет 100% от контейнера по ширине = 320пх

Answer 2

[profesor08]

Удали min-width: 320px;, так как по сути ты задал минимальный размер для контейнера, меньше которого он не сожмется. Отсюда у тебя прокрутка, если окно меньше этого размера. Просто удали это свойство, оно тут не нужно.

Answer 3

[Арсений Матыцин]

1. min-width: 320px — это буквально звучит, как: «Минимально допустимая ширина 320px, если родитель меньше (в данном случае экран) — двигай его)»
2. Ну и обычно, если надо скрыть элементы, которые торчат — используют overflow;

Comments

[alexarchibasov]

Спасибо за ответ. А почему контент блока child вылезает за пределы? Он же должен 100% считать от блока parent?

[Арсений Матыцин]

alexarchibasov, https://codepen.io/pen/ — сюда с конкретным примером контента.

[alexarchibasov]

Арсений Матыцин, спасибо за помощь, уже разобрался. Блок .container вылезал за пределы потому, что:
во-первых, имел position: absolute и min-width: 320px;. А .parent не имел такого ограничения, но имел position: relative;. Всё решилось тем, что свойство min-width: 320px; перешло от .parent, к body.