僅使用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 備忘單 ，官方文檔和瀏覽器支持