Использование flexbox для получения 2 divs на равной высоте, но как насчет контента?

Question

В настоящее время я использую flexbox для создания 2 одинаковых (по высоте) DIV. Это прекрасно работает, однако я один маленький вопрос.

Первый DIV содержит форму, а второй DIV содержит некоторый общий текст и несколько изображений.

Небольшая проблема, которую я испытываю, заключается в том, когда форма расширяется, в зависимости от параметров, которые выбирает человек. Расширяясь, я имею в виду, что первый DIV будет увеличиваться по высоте. Благодаря flexbox 2-й DIV также увеличивается по высоте, чтобы соответствовать первому.

Теперь, что касается проблемы, поскольку содержимое во втором DIV ограничено, оно создаст много белого пространства внизу DIV, когда первый DIV будет расширяться (тот, который имеет форму).

Я думал о решениях, но, очевидно, я ничего не нашел для этого. Я думаю, что лучшим решением для решения проблемы пробела на 2-м DIV является то, что пространство между дочерним DIV во втором DIV автоматически настраивается. Поэтому, когда форма (в первом DIV) увеличивается по высоте, она должна добавить пространство между различными DIV, которые я использую во 2-м DIV.

Другое, и даже лучшее решение, будет заключаться в том, что оно автоматически будет показывать более или менее (дочерние) DIV (во втором DIV) в зависимости от высоты первого DIV (с формой).

Я хорошо объясняю вещи намного сложнее, чем это, поэтому я загрузил (Photoshopped) скриншот, чтобы показать, что я имею в виду, и с какой проблемой я сталкиваюсь.

В начале формы:

При выборе варианта (и форма расширяется):

форма Я использую называется: MachForm. И дивы (с текстом и изображением) на правой стороне строятся так:

   <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> 

Я надеюсь, что кто-то может предоставить мне приемлемого решения или идеи, потому что я был дурачиться с этим в течение некоторого времени , но безрезультатно.

ИМХО наилучшим вариантом было бы, если бы те (дочерние) DIV с правой стороны (с текстом и изображениями) автоматически скрывали или показывали, в зависимости от содержимого DIV (небольшая или расширяющаяся форма). Надеюсь, я правильно объяснил. Я не знаю, какую дополнительную информацию я могу предоставить. Спасибо, что посмотрели.

// обновление

Добавлено некоторые HTML и CSS для codepen, как спросил Влад. Ссылка: my html and css

Answer 1

Вот пример (все еще бета) .. смотреть на меню устройства (нажмите кнопку гамбургер)

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

Если настроить высоту окна вы увидите, что пункты меню отрегулируйте высоту экрана.

Я достиг этого, выполнив следующие дочерние элементы меню.

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

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

Обратите внимание, что высота в этом случае очень важна.

Итак, в вашем случае что-то подобное должно работать.

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

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