How to have a vertical scroll bar in a flex layout without fixed height?

user_1528347 0
Viewed 517

Edit: That question has been closed by a moderator as a duplicate, but I tend to disagree, the other question is about one element limiting the others. Here any other element than a specific one can be the tallest.

The code is always the easiest way to show a problem: https://codepen.io/Flaburgan/pen/MWbPyjN

I have boxes in a flex layout and they have different height with a dynamic content. All the boxes adapt and have the height of the tallest one, and that is great.

However, I know that one of them can have a lot of content. Thus I would like my boxes to ignore this one, and take the height of the second biggest box. The first one should then see a vertical scroll bar appearing inside it.

How can I achieve this without using fixed height?

Actual:
actual

Expected:
expected

<p>The goal is that the green container height doesn't exceed the height of the other boxes, and that a vertical scroll bar appear in it.</p>

<div class="container">
  <div class="red">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="green overflow">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="blue">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Loutre</li>
    </ul>
  </div>
</div>

.container {
  display: flex;
}

.container > div {
  padding: 0 1rem;
  margin: 1rem;
  /* This would make it works, but I don't want a fixed value
  but the height of the second biggest box
  max-height: 200px;*/
}

.overflow {
  overflow: auto;
}

.red {
  background-color: #fcc;
}

.green {
  background-color: #cfc;
}

.blue {
  background-color: #ccf;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  padding: 0.5rem;
}
flexbox css
1 Answers

You can set the height of the green box to the height of the parent container by positioning it absolutely. Then its height would not be fixed. But the width of the green box would have to be fixed, otherwise the boxes after the green box would not be positioned correctly.

Here is an example:

.box-container {
  display: flex;
  position: relative;
}

.box {
  padding: 0 1rem;
  margin: 1rem;
}

.box.red {
  background-color: #fcc;
}

.green-box-wrapper {
  position: relative;
  /* width of the green box plus the margin */
  width: calc(7.9125rem + 2rem);
}

.box.green {
  background-color: #cfc;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 5.9125rem;
}

.box.blue {
  background-color: #ccf;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  padding: 0.5rem;
}
<div class="box-container">
  <div class="box red">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="green-box-wrapper">
    <div class="box green">
      <ul>
        <li>Ours</li>
        <li>Chevreuil</li>
        <li>Lapin</li>
        <li>Loutre</li>
        <li>Ours</li>
        <li>Chevreuil</li>
        <li>Lapin</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
      </ul>
    </div>
  </div>
  <div class="box blue">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Loutre</li>
      <li>Loutre</li>
    </ul>
  </div>
</div>

Try to edit the text in the boxes. The height of the three boxes will always be equal to the height of the largest one (except the green box). But the green box won't change its width when there's too much text.

user_146368070
Related