Html 只有css的两行布局

我需要为网页创建一个2行布局，以管理过滤器的部分和具有以下特征的结果的其他部分：

• 页面不能溢出100%的高度
• 第一行的高度取决于他的内容（可能是可变的，javascript函数可以通过隐藏某些元素来更改）
• 第二排的高度是100%和第一排高度之间的差值
• 在第二行中，溢出的div必须是类为“list”的div，我无法将其移动到class=“result”的div中（这将使其工作）

HTML:

我尝试使用flexbox（以不同的方式），但最后一点我找不到解决方案

重要提示：我不能使用javascript设置行的高度。我需要一个只使用CSS的解决方案

---

谢谢

如果使用“flex:1”属性声明.result div，它将占用外部div（.main）中剩余的所有空间。因此，如果过滤器div占用500个高度像素，则结果将在空白空间中调整，从父级填充100%。如果动态更改它，隐藏或添加元素flex:1将保证所有剩余空间都将由.result自动填充

---

希望有帮助

谢谢你的回答。我已经试着设置“flex:1”，但是他的孩子（高度：100%）无法检测到他父母的真实高度，这是因为这种形式的属性声明（带有百分比）总是相对于其父母，总是通过根元素“层叠”起来。如果您将height:100%设置为html和body元素，将overflow:hidden设置为.main类，您应该可以开始了。

<div class="main">
    <div class="filter">
        <div class="filtercontent">
            filter content
        </div>
    </div>
    <div class="result">
        <div class="resultcontent">
            <div class="list">
                <div class="listcontent">
                    list content    
                </div>
            </div>
        </div>
    </div>
</div>

.main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.filter {
    width: 100%;
}

.result {
    width: 100%;
}

.resultcontent {
    height: 100%;
    width: 100%;
}

.list {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.listcontent {
    height: 1000px;
    width: 2000px;
}