0

I'm not a css expert and I don't understand why my right-bottom divs don't work as expected.

I'm using a jquery extension (jquery-resizable) to resize some panels and I want that one of my last divs .overflow-container (level 2) keeps the size of his parent div #resizable-panel-right-bottom (level 1). It is ok but if I set a high value in the inner div .overflow-content (level 3) for the height, then the height for .overflow-container (level 2) isn't correct anymore.

Here I have a draft on codepen of what I want to do:

#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;
}

The goal is to have a jquery datatable (from datatables.net) in the last div.

Actually I'm using this JS libraries: jQuery 3.3.1 bootstrap 4 jquery-resizable

And bootstrap 4 styles

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jin-K
  • 105
  • 1
  • 7

1 Answers1

0

You need to reconfigure your height definitions.

The problem is that you've scattered height: 100% throughout your HTML structure. However, for percentage heights to be recognized properly, they must have a defined height on the parent.

Flex heights, like you have with flex-basis: auto in some places, are not always sufficient.

See:

Also see MDN:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hi, I'm not sure I totally understood your answer, but the `height: 100%` point showed me the correct way to fix this (I hope): Solution on [codepen](https://codepen.io/jin-k/pen/PgBbZM) – Jin-K Apr 22 '19 at 12:23