Блок выходит за границы родительского

Question

С данной проблемой я столкнулся, когда пытался расположить модальное окно по центру экрана, но и еще в некоторых местах. Ответ на тот свой вопрос я не получил, попробую описать заново.
У нас есть родительский блок и внутри еще один блок, который нам нужно расположить по центру. Сделаем это с помощью display: flex:

html, body
{
  margin: 0;

    height: 100%;
    width: 100%;
}

footer
{
  margin-top: auto;
}

.page
{
    display: flex;
    flex-direction: column;
}


.parent
{
  background-color: yellow;
  min-height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.child
{
  background-color: green;
  height: 100px;
  width: 100px;
}

<body class="page">
  <header>Header</header>
  <div class="parent">
    <div class="child">
      
    </div>
  </div>
  <footer>Footer</footer>
</body>

Как видим, все отлично, прощу заметить, что у родительского блока есть минимальная высота 100vh. И теперь вот что мы получаем, если контента в дочернем блоке будет больше чем минимальная высота:

html, body
{
  margin: 0;

    height: 100%;
    width: 100%;
}

footer
{
  margin-top: auto;
}

.page
{
    display: flex;
    flex-direction: column;
}


.parent
{
  background-color: yellow;
  min-height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.child
{
  background-color: green;
  height: 110vh;
  width: 100px;
}

<body class="page">
  <header>Header</header>
  <div class="parent">
    <div class="child">
      
    </div>
  </div>
  <footer>Footer</footer>
</body>

Как я заметил, данная проблема появляется только тогда, когда у этого .parent установлено min-height в процентах (%) или vh.

Answer 1

Один из вариантов, вместо <body class="page"> - сделать обёртку с классом .page

<body>
  <div class="page">
    <header>Header</header>
    <div class="parent">
      <div class="child">

      </div>
    </div>
    <footer>Footer</footer>
  </div>
</body>

Либо поменяйте в css, в теге body height: 100% на min-height: 100%

UPD

Для того чтобы футер был в поле видимости, и находился внизу, у вас есть 2 варианта.

Первый - сделать футеру фиксированное позиционирование

footer {
  position: fixed;
  bottom: 0;
}

Тогда футер всегда будет в одном месте, даже при скролле.

Другой вариант, более логический, использовать calc в css. Тогда футер будет внизу, если условный .content не занимает много места Но подходит если знаете высоту футера.

.page {
  min-heigh: calc(100vh - 200px);
}

Здесь 200px это высота футера.

Пример:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header,
footer {
  background: black;
  color: orange;
  height: 30px;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: coral;
  width: 100%;
  height: max-content;
  min-height: calc(100vh - 60px); /*100% - 30px в.хедера и 30px в.футера */
}

.child {
  background: pink;
  width: 50px;
  height: 50px;
}

<body>
  <div class="page">
    <header>Header</header>
    <div class="content">
      <div class="child">
        hello
      </div>
    </div>
    <footer>Footer</footer>
  </div>
</body>

ONE MORE UPD:

Вариант на флексах

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header,
footer {
  background: black;
  color: orange;
  height: 50px;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: coral;
  width: 100%;
  height: max-content;
  flex-grow: 1; /* не пропустите это */
}

.child {
  background: pink;
  width: 50px;
  height: 50px;
}

<body>
  <div class="page">
    <header>Header</header>
    <div class="content">
      <div class="child">
        hello
      </div>
    </div>
    <footer>Footer</footer>
  </div>
</body>

БЛОГ НА HUSL

Блок выходит за границы родительского

Ответы (1 шт):