Javascript 使div填充父级的其余部分并随内容增长

我有一个带有

min height

的框，它应该显示一些活动文本，这些文本在按钮单击时会发生变化（按钮在代码段中不起作用，请通过在相应的类中更改不透明度来模拟单击）

按钮应始终位于框的底部，

。内容

应以开头的文本填充框的其余部分此外，由于文本长度不同，我希望框随文本增长（按钮仍在底部，上方为

.content

。

我怎样才能做到？这就是我取得的成绩：

。第1项{
不透明度：0；
}
.项目-2{
不透明度：1；
}
.项目-3{
不透明度：0；
}
.包装纸{
背景颜色：黄色；
最小高度：20雷姆；
宽度：400px；
填充：4rem；
框大小：边框框；
显示器：flex；
flex:1自动；
弯曲方向：立柱；
}
p{
保证金：0；
}
.内容{
位置：相对位置；
flex:1自动；
}
钮扣{
flex:01自动；
}
.项目{
位置：绝对位置；
排名：0；
左：0；
}
.主动{
不透明度：1；
}

测试1


他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。d.临时劳工和就业许可证，以书面形式提交。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。

试验3

下一个

var content=document.getElementById（“content”）；
var addContent=function（）{
content.innerHTML+=“敏捷的棕色狐狸跳过了懒惰的狗”
}

.parent{
背景色：#F3；
显示器：flex；
弯曲方向：立柱；
填充：16px；
}
.内容{
背景色：#f3aaf3；
最小高度：50px；
溢出：自动；
}
.btn{
底部：16px；
边缘顶部：32px；
填充：8px；
}

敏捷的棕色狐狸跳过了懒狗
添加内容

谢谢，帮了我很多忙！但是有没有一种方法可以使文本永远不会到达按钮？这个盒子应该和它所有的内容一起成长。因为我需要css转换来更改文本，所以我已经准备好了所有元素，只有一个元素是可见的。还有一种方法可以考虑这一点吗？正如你在我编辑的片段中看到的那样，我实现了文本包装器用Flex填充容器的其余部分。但该框不会随着内容的增长而增长。已更新代码段。可以设置内容最大高度（或高度）。如果文本溢出高度-将显示滚动条。如果你想实现一些不同的目标，你需要提供更多的解释细节。固定位置-对子对象使用绝对/固定位置，对父对象使用相对位置。可调位置（增长）-将flex与

flex direction:column

一起使用。nvm这是一个新问题，我将打开一个新主题！