Элемент переполняет родительский элемент и прокрутка не работает

Question

Я не эксперт по CSS и не понимаю, почему мои правые нижние делители не работают должным образом.

Я использую расширение jquery (jquery-resizable), чтобы изменить размеры некоторых панелей, и я хочу, чтобы один из моих последних элементов div .overflow-container (уровень 2) сохранял размер родительского элемента div #resizable-panel-right-bottom (уровень 1). Это нормально, но если я установлю высокое значение во внутреннем div .overflow-content (уровень 3) для высоты, то высота для .overflow-container (уровень 2) больше не будет правильной.

Здесь у меня есть набросок codepen того, что я хочу сделать:

#resizable-panel-right-bottom {
    flex: 1 1 auto;
    min-height: 200px;
    padding: 5px;
}
.overflow-container {
  height: 100%;
  padding: 5px;
  background: aqua;
  overflow: scroll; /*should be "overflow: auto" I know*/
}
.overflow-content {
  height: 1000px;
  padding: 5px;
  background: pink;
}

Цель состоит в том, чтобы иметь jatery datatable (из datatables.net) в последнем div.

На самом деле я использую следующие библиотеки JS: jQuery 3.3.1 бутстрап 4 JQuery-изменяемый

и начальная загрузка 4 стиля

Answer 1

Вам нужно перенастроить определения высоты.

Проблема в том, что вы разбросали height: 100% по всей структуре HTML.Однако для правильного распознавания высоты в процентах они должны иметь определенную высоту на родительском элементе.

Высоты изгиба, как в некоторых местах с flex-basis: auto, не всегда достаточны.

См .:

• Работа со свойством CSS height и процентными значениями
• Chrome / Safari не заполняет 100% высоты родительского элемента flex

Также см. MDN :

Для того чтобы overflow имел эффект, контейнер уровня блока должен иметь либоустановить высоту (height или max-height) или white-space установить на nowrap.