Javascript 将元素宽度调整为父级中的滚动条

我有一张卡片，上面有一堆文字。如果文本对于卡片来说太大，我想添加一个滚动条。卡片上还有一个页脚。我的问题是，如果有滚动条，我希望页脚稍微收缩。我不希望我的页脚出现在滚动条下面

在实际应用程序中，页脚类似于Microsoft Word标尺：

我可以将页脚放在

overflow-y

区域内，但它不再具有粘性（始终可见）

代码如下：

#框{
宽度：300px；
高度：300px；
显示器：flex；
弯曲方向：立柱；
}
#内容{
flex:1自动；
溢出y：自动；
}
#粘脚{
flex:0自动；
背景：红色；
高度：30px；
}

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

您可以在内容中包含页脚，并使用

位置：sticky

（）

#框{
宽度：300px；
高度：200px；
显示器：flex；
弯曲方向：立柱；
}
#内容{
flex:1自动；
溢出y：自动；
}
#粘脚{
位置：粘性；
底部：0；
左：0；
右：0；
背景：红色；
高度：30px；
}

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉哈赫

结束