4

I have a parent div with display:flex; flex-direction: row; flex-wrap: wrap; Inside it there are child divs, lets call them a b c d

Each div has <ul></ul> with multiple items inside it. So it's something like this:

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .list-container {
    padding: 10px;
    border: 1px solid black;
  }

  .list-container h2 {
    margin-top: 0;
  }

  .list-container ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
  }
</style>

<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List B</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List C</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

Divs b and c can take very huge amount of items, so I want to limit their height.

How do I limit b and c height to max height of all other divs, if they are bigger, making them scrollable in this case? I need a solution without a and d height fixed in css(something like height: 100px;) as some internet solutions suggest because they are dynamic and can change their height too

maxpovver
  • 1,580
  • 14
  • 25
  • Where do you want the cutoff to be exactly? How many items should be there before it becomes scrollable? And are you saying the height of A and D should be `fit-content` instead of all columns having the same height? – Miss Skooter Mar 09 '23 at 07:29
  • @MissSkooter I need a and d divs to take all the height they need for their content, but for b and c only take height of max(height a; height d) – maxpovver Mar 09 '23 at 07:31
  • Okay, but what if A had 20 items? then taking the max(height A; height D) would stop making sense no? since you'd end up with really long unnecessary columns. Or is that the intended behavior? – Miss Skooter Mar 09 '23 at 07:33
  • @MissSkooter Yes it is, height of divs that aren't b or c is never big(there is actually more than two of such divs in my casse, I just simplified it), only b and c can ever get much bigger than other divs – maxpovver Mar 09 '23 at 07:35
  • @tacoshy it does not because it is using fixed height in pixels which is not the solution that I need as I already mentioned in my question – maxpovver Mar 09 '23 at 07:49
  • @maxpovver then you haven't read the answers... there is no fixed height there – tacoshy Mar 09 '23 at 07:51
  • @tacoshy min-height: 100px; is still fixing height to some number in pixels which is not what I need – maxpovver Mar 09 '23 at 07:53
  • which is an example to simualte it not a necessity – tacoshy Mar 09 '23 at 07:54
  • @tacoshy this absolute position hack is not even workig for more than one div, try it yourself, they are all just put on each other – maxpovver Mar 09 '23 at 07:57

1 Answers1

2

Assuming we're allowed to add an extra div inside the height-limited divs, we can do something like this:

.flex-container {
  display: flex;
  flex-direction: row;
}

.list-container {
  padding: 10px;
  border: 1px solid black;
}

.list-container h2 {
  margin-top: 0;
}

.list-container ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}

.flexible {
  display: flex;
  flex-direction: column;
}

.flexible .flexible-child {
  flex-basis: 0px;
  overflow: auto;
  flex-grow: 1;
}
<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container flexible">
    <div class="flexible-child">
      <h2>List B</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
      </ul>
    </div>
  </div>
  <div class="list-container flexible">
    <div class="flexible-child">
      <h2>List C</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
      </ul>
    </div>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>
Damzaky
  • 6,073
  • 2
  • 11
  • 16