Flexbox переполняет вместо прокрутки [дублировать] ⇐ Html

[Anonymous]

Что мне нужно: < /p>

• Приложение, которое принимает весь экран (

  Код: Выделить всё

  height: 100vh

  )
• Навигационная панель в верхней части
• 2 короб > Если один контент слишком мал, коробка по -прежнему берет оставшуюся высоту < /li>
  Если один контент слишком большой, коробка становится прокручиваемой < /li>
  Есть тень вокруг коробок. Эта часть важна, потому что она мешает мне использовать переполнение: скрыт , где я хочу

Итак, вот идея о том, что она должна смотреть Например:

До сих пор я реализовал его с помощью некоторых гибких ящиков. Проблема возникает, когда фиолетовая часть становится слишком большой. Содержание переполняется вместо того, чтобы заставлять коробку прокручивать, и я не понимаю, почему высота не рассчитывается справа < /p>

Код: Выделить всё

Test overflow


html, body {
padding: 0;
margin: 0;
}

.screen-container {
height: 100vh;
box-sizing: border-box;
padding: 50px;

display: flex;
flex-direction: column;
gap: 20px;
}

.shadow-panel {
overflow-y: auto;
box-shadow: 0 0 50px blue;
border-radius: 50px;
}

nav {
box-sizing: border-box;
padding: 20px;
}

.content-panel {
color: white;
height: 2000px;
padding: 50px;
background-color: blueviolet;
}




Navigation bar





If the size of this element is too big, the content will overflow dispite of `overflow-y:auto`
And placing `overflow:hidden` on the `main` element is not an option as it would break the shadow




Content

Подробнее здесь: https://stackoverflow.com/questions/794 ... -scrolling