CODEWITHSUNDEEP
htmlcssflexbox
Tobias
Tobias

Reputation: 35

HTML CSS flexible growing lists

I'm trying to build a react components, which renders 2 lists. Both lists can dynamically get bigger or smaller. I've got 100% space vertically. If both lists are big, than every list should take 50% height. If any list isn't big enough to take the whole 50% height space, than the other one should grow.

I can't find a working solution so far. I think flex-grow and shrink is a good way to do it, but it doesnt work for me.

.container {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  overflow-y: hidden;
}

.list_1 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.list_2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
}
<div class="container">
  <div class="list_1">
    <li>Item 1a</li>
    <li>Item 1b</li>
    <li>Item 1c</li>
  </div>
  <div classs="list_2">
    <li>Item 2a</li>
    <li>Item 2b</li>
    <li>Item 2c</li>
  </div>
</div>

I tried so many thinks from documentations but nothing works..

Upvotes: 0

Views: 451

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

As you can see in the following snippet, I have given flex: 1 to both .list-1 and .list-2.

So when the second list grow, the first one shrinked.

If both has equal items, both will have 50% width also.

Please check and try updating your code with this solution.

.container {
   display: flex;
   flex-direction: column;
   border: 1px solid blue;
   height: 300px;
}
.list_1, .list_2 {
   flex: 1;
   border: 1px solid #ddd;
}
<div class="container">
   <div class="list_1">
      <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
      </ul>
   </div>
   <div class="list_2">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
   </div>
</div>

Upvotes: 1

Related Questions