Html CSS：如何从div底部/堆栈元素填充div的内容

我肯定以前会有人问过这个问题，我就是找不到正确的解释！但我无法让这些选择对我起作用

我有一个精简的div元素，它将输入动态值，它将把div中的当前元素推到div的更高位置

目前我已经寻找了几个相关的问题，但是这些问题建议定位（

absolute/relative/etc

），但是在这种情况下，我无法解决如何实现这些问题

对于当前的标记，我不希望使用

float

，因为这会完全破坏DOM和分层（这让我无法开始，只是我不想这样做）

.ratingList{
位置：绝对位置；
底部：35px；
右：5px；
高度：200px；
宽度：40px；
背景：红色；
文本对齐：居中；
}
.评级表b{
宽度：40px；
显示：块；
高度：40px；
边框：2倍纯色灰色；
边界半径：50%；
框大小：边框框；
背景：#333；
线高：36px；
颜色：#eee；
}

投资回报率
12A英国
15

Flexbox让这一切变得非常轻松-一些更具描述性的HTML/CSS也不会出错，我认为：

*{
框大小：边框框；
保证金：0；
}
.评级表{
位置：绝对位置；
底部：35px；
右：5px；
高度：200px；
宽度：40px；
背景：红色；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
.标签{
文本对齐：居中；
}
.评级{
宽度：40px；
高度：40px；
边框：2倍纯色灰色；
边界半径：50%；
背景：#333；
线高：36px；
颜色：#eee；
}

投资回报率


12A

英国


15

flexbox柱与flex端对齐？确实试图远离flexbox和浮动。但这可能是唯一的选择flexbox的问题是什么？我一直认为它有很多问题。但我想那只是被滥用的时候。flexbox可以与绝对定位一起使用吗？flexbox和ABSLUET定位不相关，您可以随心所欲地将两者结合使用，而不会产生任何问题