Question

The flex item extends beyond the boundaries of the flex container

I have a flex container with the flex-direction set to column.

Let's assume there are two flex items and the second item contains additional containers with text.

I don't want the second flex item to extend beyond the boundaries of the flex container. Instead, I want to display a scrollbar for the inner container with the text within the second flex item.

How can I add a scrollbar to a container that is inside a flex item?

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  max-height: 100px;
  border: 1px solid red;
}

.scrollable{
  overflow: auto;
}

<div class="container">
  <div class="container-item">Lorem ipsum</div>
  <div class="container-item">
    <div>Lorem, ipsum</div>
    <div class="scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
  </div>
</div>

https://jsfiddle.net/wLm9hd2k/

2 60 2

1 Jan 1970

Solution

Slightly improved @Paulie_D's answer so that other <div>s don't shrinking:

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  max-height: 150px;
  border: 1px solid red;
}

.container-item {
  flex: none;
  display: flex;
  flex-direction: column;
  &:has(.scrollable) {
    flex: auto;
    min-height: 0;
    div {
      flex: none;
      &.scrollable {
        flex: auto;
        overflow: auto;
      }
    }
  }
}

<div class="container">
  <div class="container-item">Lorem ipsum</div>
  <div class="container-item">
    <div>Lorem, ipsum</div>
    <div class="scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
  </div>
</div>

2024-07-23

imhvost

Solution

Make your .container-item a flex column also and apply min-height:0.

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  max-height: 150px;
  border: 1px solid red;
}

.container-item,
div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.scrollable {
  overflow: auto;
}

<div class="container">
  <div class="container-item">Lorem ipsum</div>
  <div class="container-item">
    <div>Lorem, ipsum</div>
    <div class="scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
  </div>
</div>

2024-07-23

Paulie_D