Css 100%高度的FlexBox

我需要有一个100%高度的flexbox，只有一个50像素的儿童页脚。 无需计算（100%-50px）是否可行

以下是我的尝试：

body，html{
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
背景色：红色；
}
.flex-1{
背景颜色：黄色；
}
.flex-A{
背景颜色：蓝色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.flex-1-child{
背景颜色：紫色；
溢出y：自动；
高度：计算（100%-50px）；
}
.flex-2-child{
背景颜色：绿色；
高度：50px；
}
.文本{
高度：500px；
}

测试
测试2
测试

更改

高度：计算（100%-50px）到
flex:1并且它将最大限度地扩展其高度

我猜这就是你想要的？
更改
高度：计算（100%-50px）到
flex:1并且它将最大限度地扩展其高度

我猜这就是你想要的？
只需在动态元件上使用
flex:1


body，html{
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
背景色：红色；
}
.flex-1{
背景颜色：黄色；
}
.flex-A{
背景颜色：蓝色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.flex-1-child{
背景颜色：紫色；
溢出y：自动；
弹性：1；
}
.flex-2-child{
背景颜色：绿色；
高度：50px；
}
.文本{
高度：500px；
}

测试
测试2
测试
只需在动态元件上使用
flex:1


body，html{
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
背景色：红色；
}
.flex-1{
背景颜色：黄色；
}
.flex-A{
背景颜色：蓝色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.flex-1-child{
背景颜色：紫色；
溢出y：自动；
弹性：1；
}
.flex-2-child{
背景颜色：绿色；
高度：50px；
}
.文本{
高度：500px；
}

测试
测试2
测试
Remove
overflow-y:auto
，这就是你想要得到的吗？不，溢出是可以的，但是由于100%的高度，外部溢出不应该出现。Remove
overflow-y:auto
，这就是你想要得到的吗？不，溢出是可以的，但是外部溢出不应该出现，因为100%的高度。嗨，谢谢你的回答，但是为什么我的容器中有一个溢出？@Spawnrad这是因为
.text
元素的高度是500px，而容器比这个要短。您可以删除
500px
或更改
overflow-y:auto到
溢出-y：隐藏以避免溢出。溢出是正常的。我看到了，在这个之外还有一个溢出。这是由
body
元素的边距引起的。添加
margin:0
to
body
删除了此溢出：您好，谢谢您的回答，但是为什么我的容器中有溢出？@Spawnrad这是因为
.text
元素的高度为500px，而容器比它短。您可以删除
500px
或更改
overflow-y:auto到
溢出-y：隐藏以避免溢出。溢出是正常的。我看到了，在这个之外还有一个溢出。这是由
body
元素的边距引起的。添加
margin:0
to
body
删除了此溢出：您好，谢谢您的回答。如何使容器保持100%的高度而不溢出？请从
.text
中删除静态高度。您将其设置为500，这比其父级高，因此父级将获得一个滚动条。这一个可以。我不需要家长滚动条（100%高度容器无溢出）嗨，谢谢你的回答。如何使容器保持100%的高度而不溢出？请从
.text
中删除静态高度。您将其设置为500，这比其父级高，因此父级将获得一个滚动条。这一个可以。我不需要父滚动条（100%高度容器，无溢出）