1

I have a flex container with flex children inside of it. In every flex-child there are 2 divs on top of each other, first one is with unknown height. I want to make the second div's height to fill the whole remaining height. Everywhere I look I see flex solution, but I don't know how to implement it since parent of the 2 divs is flex-child itself.

The whole case is more complex, but I'll try to simplify code here:

<div class="flex-parent-row">

   <div class="flex-child">

      <div class="auto-height"></div>
      <div class="i-want-this-one-to-fill-remaining-height"></div>

   </div>

   ...more flex children...

</div>

And putting ".auto-height" div inside ".i-want-this-one-to-fill-remaining-height" is not an option at this moment.

Please help :) Thank you!

EDIT: I've made a full Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26

EDIT-2: Solved! Thank you for your suggestions! Here's the fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29

vanden1976
  • 38
  • 1
  • 8
  • 1
    Make the `.flex-child` a flex container also. Give it `display: flex; flex-direction: column;`. Then give the second child `flex-grow: 1`. – Michael Benjamin Jul 19 '20 at 13:38
  • Hi vanden1976, welcome at SO! Please post running code (HTML and CSS) so we can test whats going on: [reprex]. But first off: flexbox child elements either use `flex-grow: 1` or simply 'height: 100%' depending on the flexbox parent's `flex-direction`. – Rene van der Lende Jul 19 '20 at 13:39
  • Thank you, Michael! I'll try this. I deal with flex since recetly and I didn't know children can be parents too. I'll post back soon. Thank you Rene, I will post the whole thing, I would love to. And sorry Paulie_D, I don't think it's a duplicate question, I've done big research before asking. Thank you! :) – vanden1976 Jul 19 '20 at 19:12
  • Thank you, Michael Benjamin, that worked! In the edited question I put a link to fiddle before and after. – vanden1976 Jul 19 '20 at 20:07

1 Answers1

5

It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you need additional help please provide more code.

Ahron M. Galitzky
  • 2,219
  • 2
  • 13
  • 25
  • Ahron, thank you! I'll try what you suggest and write back! – vanden1976 Jul 19 '20 at 19:14
  • I'm glad to help. Let me how it goes. Happy coding! – Ahron M. Galitzky Jul 19 '20 at 19:27
  • Solved!!! Thank you Ahron, and also to Michael Benjamin, who suggested the same! Still a lot to learn about flex properties. Here's the full story before: https://jsfiddle.net/vanden1976/dLg20x4s/26 and here's after: https://jsfiddle.net/vanden1976/dLg20x4s/29 – vanden1976 Jul 19 '20 at 20:06
  • I'd suggest you to check out https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ it helped me a lot to learn and understand flex – Ahron M. Galitzky Jul 19 '20 at 20:07