2

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;
}
Fla
  • 536
  • 6
  • 23
  • CSS has nothing like _take height of the 2nd highest element_. You can use JS to calculate and set 2nd highest value (of course, you need to recalculate height on resize). – pavel Mar 08 '21 at 09:15
  • Yeah of course this is a naive way to ask it. A better way to view it is to say "ignore that element" so that the biggest box for it will become the second one. This could maybe be achieve by changeing it stack context for example, I don't know. – Fla Mar 08 '21 at 09:22
  • I don't think it's possible this way. Not sure if you can tell CSS that any element has to be ignored. You can set fixed height, you can set auto height (different boxes heights) or you can set flex height. I don't see more CSS options. JS solution isn't so elegant (no pure CSS), but technically it's for 5 code lines with no extra time needed or processing. – pavel Mar 08 '21 at 09:33
  • I added another duplicate – Temani Afif Mar 10 '21 at 23:29

1 Answers1

1

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.

grorp
  • 345
  • 2
  • 8