Child doesnt respect parent height-CodePudding

Im trying to make a vertical scroll on my .left class.

When i try to instert overflow-y: scroll, nothing happens. I tried to set max-height on parent container, but its exceeds the div limits I tried to set also overflow-y: scroll on .left divider.

Here is a reproduction.

Stackblitz: https://stackblitz.com/edit/web-platform-49iyin?file=index.html

CodePudding user response：

If you want to have a scroller inside that element, you need to have a fixed height for that parent element

.content {
  height: 500px;
  background: #ddd;
}

.wrapper {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-list {
  display: flex;
  margin-top: 24px;
}

.left {
  height: 400px; /* Should have a fixed height here */
  overflow: auto; /* Should be auto instead of `scroll` */
  flex: 0.3;
  background: #6200ff70;
}

.product {
  display: flex;
  height: 60px;
  margin: 8px;
}

If you want to have a scroller for the entire area under content. You can set like this

.content {
  height: 500px;
  overflow: auto;
  background: #ddd;
}