CSS + flex +身高100％

Question

我正面臨一個問題，即我正在使用GWT框架構建頁面，並且我正在嘗試將100％的高度設置為元素並且它不起作用。

是這樣的：

<div id="main">
    <div id="1">
        <div id="2"> 
            ...
        </div>
    </div>
</div>

Div main - 我無權更改代碼，因為它是一個框架;

Div 1 - style=display:flex;

Div 2 - style=display:flex;flex-direction:column; height:100%; style=display:flex;flex-direction:column; height:100%;

等等..

使用chrome開發者工具，如果我為主div和div 1設置高度100％，我的內容將獲得100％的高度，否則我不會。

問題是，如何在不更改主div的情況下設置它？ 因為正如我所說，我無法訪問它...

Answer 1

看起來你想要使用flex: 1規則。 我想我完全明白你的#main有一個無法觸及的高度，你的大多數孩子<div>應該填充內容。 請嘗試以下操作並查看示例...

<div id="main">
    <div id="one">
        <div id="two"> 
        </div>
    </div>
</div>

---

#one {
    display: flex;
    height: 100%;
    flex-direction: column;
}

#two { 
    flex: 1;
}

注意 - 我更改了CSS選擇器的id。 不確定這是不是你這樣做，但請記住為什么ID無法以數字開頭是你打算用CSS選擇器來定位它們。

JSFiddle Link - 工作示例