仅使用一个元素将位置绝对元素内容与底部对齐

Question

I have a position absolute div element with text content inside without any tag, like this:

<div class="element">
    This is some content...
</div>


.element{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    padding: 10px;
    color: white;
}

I want to align that content to the bottom of the div, but without using more html tags(like this answer on a similiar question ), to keep it simple.

How can I achieve this using css only?

Answer 1

You can achieve that with CSS flexbox like this:

 .element { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; overflow: hidden; padding: 10px; color: red; background: green; display: flex; align-items: flex-end; }

 <div class="element"> This is some content... </div>