Using flexbox to get 2 divs in equal height, but what about the content?

Question

I am currently using flexbox to create 2 equally sized (in height) DIV's. This works perfectly, however I one small issue.

The first DIV contains a form and the second DIV contains some general text and a few images.

The small issue I am experiencing is when the form expands, depending on the options the person selects. By expanding I mean the first DIV will increase in height. Thanks to flexbox the 2nd DIV also increase in height, to match the first one.

Now, as for the issue, since the content in the 2nd DIV is limited, it will create a lot of white-space at the bottom of the DIV when the first DIV expands (the one with the form).

I have been thinking about solutions, but clearly I haven't found anything for it. I think the best solution to solve the amount of whitespace on the 2nd DIV is by making the space between the child DIV's in the 2nd DIV autmatically adjust. So when the form (in the first DIV) increase in height, it should add space between the different DIV's I use in the 2nd DIV.

Another, and even better solution, would be that it would automatically show more or less (child) DIV's (in the 2nd DIV) depending on the height of the first DIV (with the form).

I am good at explaining things much more difficult than it is, therefor I uploaded a (Photoshopped) screenshot to show what I mean and what problem I am experiencing.

At the start of form:

When options are selected (and form expands):

The form I am using is called: MachForm. And the divs (with text and image) on the right side are build like this:

             <div class="tweak-adv">
                <div class="tweak-adv-pic"><a href="#"><img src="/images/img.png" title="icon-name" /></a></div>
                <div class="tweak-adv-heading">
                    <h2>ipsum</h2>
                    <span>Etiam malesuada ornare ante, nec sagittis ipsum consequat non. </span>                    
                </div>
                <div class="clear"></div>
                <div class="tweak-adv-info">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu urna id dui condimentum ultricies. Ut et felis justo.</p>
                </div>                
            </div>
            <div class="clear"></div>

I hope someone can provide me with a workable solution or idea, because I have been fooling around with this for some time, but without results.

IMHO the bestion option would be if those (child) DIV's on the right side (with text and images) would automatically hide or show, depending on the left DIV's content (small or expanding form). I hope I explained myself correctly. I don't know what more information I can provide. Thank you for looking.

//update

Added some HTML and CSS to codepen as asked by Vlad. Link: my html and css

Answer 1

Here's an example ( still beta ) .. look on the device menu ( press burger button )

http://studio51.github.io/gridlecss/

If you adjust your window height you'll see that the menu items adjust to the screen height.

I achieved that by doing the following to the menu child elements.

ul(parent) {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

li(child) {
  display: flex;
  flex: 1;
}

Please note that the height in this case is very important.

So, in your case, something like this should work.

.parent-of-tweak-adv {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.tweak-adv {
  display: flex;
  flex: 1;
}