使用flexbox獲得相等高度的2個div，但是內容呢？

Question

我目前正在使用flexbox創建2個相等大小（高度）的DIV。 這很完美，但是我有一個小問題。

第一個DIV包含一個表單，第二個DIV包含一些常規文本和一些圖像。

我遇到的一個小問題是表單展開時的時間，具體取決於人員選擇的選項。 通過擴展，我的意思是第一個DIV的高度會增加。 多虧了flexbox，第二個DIV的高度也增加了，以匹配第一個。

現在，關於該問題，由於第二個DIV中的內容受到限制，因此當第一個DIV展開時（在窗體中），它將在DIV的底部創建很多空白。

我一直在考慮解決方案，但顯然我還沒有找到任何解決辦法。 我認為解決第二個DIV上空白量的最佳解決方案是自動調整第二個DIV中子DIV之間的間距。 因此，當表格（在第一個DIV中）增加高度時，它應該在第二個DIV中使用的不同DIV之間增加空間。

另一個甚至更好的解決方案是，它將根據第一個DIV的高度（帶有表格）自動顯示（第二個DIV中）或多或少的（子）DIV。

我擅長於解釋比現在困難得多的事情，因此，我上傳了一個（Photoshop截圖）屏幕截圖，以顯示我的意思和遇到的問題。

表格開頭：

選擇選項后（表單會展開）：

我使用的表單稱為：MachForm。 右側的div（帶有文本和圖像）的構建如下：

             <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（帶有文本和圖像）會自動隱藏或顯示，則選擇選項。 我希望我能正確地解釋自己。 我不知道我還能提供什么其他信息。 謝謝您的光臨。

//更新

根據Vlad的要求，將一些HTML和CSS添加到Codepen中。 鏈接： 我的HTML和CSS

Answer 1

這是一個示例（仍為beta）..在設備菜單上查看（按burger按鈕）

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