Html Question posted in
Some basic documentation can be found here.

Html – 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/

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search