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

等等..

如果我为主div和div 1设置100％的高度，使用chrome开发者工具，我的内容将获得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’s Cannot Start With a Number你打算用CSS选择器来定位它们。

JSFiddle Link - 工作示例