仅使用CSS将div增加到一个方向

Question

我有这段代码，我需要div在内部文本增加时垂直调整大小。 随着div的增加，底部应保持固定

<div class ="div-increase">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>

如何使用CSS实现此目标

.div-increase{
    position: relative;
    display: inline-block;
    width: 210px;
    height: 100px;
    max-width: 210px;
    max-height: 250px;
    min-height: 1.5em;
    border: 1px solid blue;
    padding: 3px;
    border-radius: 10px;
    line-height: normal;
    color: red;
}

Answer 1

您可以使用带有flex-direction: column-reverse flexbox实现此目的。 我还使div可编辑，因此您可以尝试在代码段中输入一些额外的文本：

 .div-increase { position: relative; display: flex; flex-direction: column-reverse; width: 210px; height: 100px; max-width: 210px; max-height: 250px; min-height: 1.5em; border: 1px solid blue; padding: 3px; border-radius: 10px; line-height: normal; color: red; } 

 <div class="div-increase" contenteditable="true">commodo sit amet, posuere lobortis quam. Vestibulum d </div> 

这是我最喜欢的flexbox 备忘单 ，官方文档和浏览器支持