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

i using flexbox create 2 equally sized (in height) div's. works perfectly, 1 small issue.

the first div contains form , second div contains general text , few images.

the small issue experiencing when form expands, depending on options person selects. expanding mean first div increase in height. flexbox 2nd div increase in height, match first one.

now, issue, since content in 2nd div limited, create lot of white-space @ bottom of div when first div expands (the 1 form).

i have been thinking solutions, haven't found it. think best solution solve amount of whitespace on 2nd div making space between child div's in 2nd div autmatically adjust. when form (in first div) increase in height, should add space between different div's use in 2nd div.

another, , better solution, would automatically show more or less (child) div's (in 2nd div) depending on height of first div (with form).

i @ explaining things more difficult is, therefor uploaded (photoshopped) screenshot show mean , problem experiencing.

at start of form:

when options selected (and form expands):

the form using called: machform. , divs (with text , image) on right side build 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 can provide me workable solution or idea, because have been fooling around time, without results.

imho bestion option if (child) div's on right side (with text , images) automatically hide or show, depending on left div's content (small or expanding form). hope explained myself correctly. don't know more information can provide. thank looking.

//update

added html , css codepen asked vlad. link: my html , css

here's example ( still beta ) .. on device menu ( press burger button )

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

if adjust window height you'll see menu items adjust screen height.

i achieved doing following menu child elements.

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

please note height in case important.

so, in case, should work.

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