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

Html – Flex overflowing its parent when max-height set to 100%

I have HTML with the following elements:

  1. .modal – represents page modal and its height is limited to 30vh.

  2. .wrapper – represents container that wraps modal content, its content is input (in my app its search input) and list of items.

  3. .list – list of elements that is wider than 30vh.

Desired behavior is that wrapper is filled by input, and rest of wrapper is filled by list, if number of items in list is too big scroll should be applied.

For some reason list (and .wrapper) overflows the page until I set display: flex on .modal

Could someone explain to me this behavior? Why does .wrapper overflow its parent even though it has overflow: hidden and max-height: 100% === 30vh of the parent until .modal does not have display: flex?

.modal {
  background-color: red;
  padding: 3rem;
  flex-direction: column;
  gap: 1rem;
  max-height: 30vh;
}

.item {
  height: 30px;
  background-color: green;
}

.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: orange;
  overflow: hidden;
}

.list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  overflow: scroll;
}
<div class="modal">
  <div class="wrapper">
    <input />

    <div class="list">
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You need to add display flex to modal or you can limit height of wrapper calc(30vh – 6 rem)

    .modal {
  background-color: red;
  padding: 3rem;
  flex-direction: column;
  gap: 1rem;
  max-height: 30vh;
  overflow: hidden;
  display: flex;
}
.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: orange;
  overflow: hidden;
  max-height: 30vh;
  height: 100%;
}
.list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  overflow: scroll;
}
.item {
  height: 30px;
  background-color: green;
}
    Login or Signup to reply.
  2. 0

    You just need to add one line of CSS & remove one.

    overflow-y: auto to the .modal

    and

    remove overflow: scroll; from .list

    .modal {
  background-color: red;
  padding: 3rem;
  flex-direction: column;
  gap: 1rem;
  max-height: 30vh;
  overflow-y: auto
}

.item {
  height: 30px;
  background-color: green;
}

.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: orange;
  overflow: hidden;
}

.list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search