Question

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

    $subscription = $someUser->subscription();
    $plan = Spark::plans()->where('id', $subscription->stripe_plan)->first();

如何使用CSS实现此目标

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

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 cheat-sheet，官方docs和browser support

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

1 个答案: