Html 两个可变自动高度行占用父高度（无JS）

我在一个父div元素中有两个div元素，它们的类名为

。variableHT

，

。其余的
。这是html

<div class="parent">
   <div class="variableHT">1234</div>
   <div class="remaining"></div>
</div>

我试着做两个div，第一个是自动高度元素，高度不是固定的，它会随着内容大小而增长。然后下一个DIV应该占用剩余的空间。
尝试添加边距值，但未成功

请帮我做这个。下面是带有溢出的小提琴：隐藏在
上。父项
上，高度规格在
上。剩余的
可以工作：

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 300px;
}

溢出：隐藏在
.parent
上，高度规格在
上。剩余的
可以工作：

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 300px;
}

第一个脏补丁…带有“溢出：隐藏”；）但有趣的问题！还有更优雅的方式吗

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 100%;
}

第一个脏补丁…带有“溢出：隐藏”；）但有趣的问题！还有更优雅的方式吗

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 100%;
}

尝试将
高度：100%
添加到
变量ht
：


尝试将
高度：100%
添加到
变量ht
：


这个怎么样：

.parent{
    display: table;
    height: 300px;
    width: 100%;
}
.variableHT{
    height: auto;
    display: table-row;
    background-color: green;
}
.remaining{
    height: 100%;
    display: table-cell;
    background-color: yellow;
}

这是给它的
这个怎么样：

.parent{
    display: table;
    height: 300px;
    width: 100%;
}
.variableHT{
    height: auto;
    display: table-row;
    background-color: green;
}
.remaining{
    height: 100%;
    display: table-cell;
    background-color: yellow;
}

这是为它准备的
它之所以有效，是因为您隐藏了溢出内容，如果第二个DIV有溢出内容呢。用户能看到最后的内容吗？不会，它会将内容剪切到300px以外。它之所以有效，是因为您隐藏了溢出内容，如果第二个DIV有溢出内容呢。用户能看到最后的内容吗？不会，它会将内容剪切到300px以上。真的很好！很好的浏览器支持。真的很好！良好的浏览器支持。