html - CSS + flex + 高度 100%

Question

我遇到一个问题，我正在使用 GWT 框架构建一个页面，我试图将 100% 的高度设置为一个元素，但它不起作用。

是这样的:

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

Div main - 我无权更改代码，因为它是一个框架；

分区 1 - style=display:flex;

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

等等..

如果我将主 div 和 div 1 的高度设置为 100%，则使用 chrome 开发人员工具，我的内容将获得 100% 的高度，否则我不会。

问题是，在不改变主div的情况下如何设置呢？因为正如我所说，我无法访问它...

Answer 1

您似乎想使用 flex: 1规则。我想我完全理解你的 #main有着触不可及的高度，还有你最 child <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 - 工作示例