如何調整div高度以根據動態生成的文本進行擴展？

Question

我通過服務的API調用收到有關產品的說明。 這種描述可能很大，不適合我的div。 這是我最初的div：

<div class="div-info">
  <h1 class="equipment-name">Title</h1>
  <h4 class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</h4>
  <ul class="equipment-price">
    <li>Foo</li>
    <li>Bar</li>
    <li>Test</li>
  </ul>
  <p class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</p>
  <p class="service-description" [@visibilityChanged]="visibility[i]">{{equipment.description}}</p>
</div>

看起來像這樣：

當用戶單擊“ Ler mais”按鈕時，應顯示文本，如果不適合div，則應增加div。 這是用戶單擊按鈕時的樣子

我希望Lorem的前兩個段落將全部顯示在div ，即使必須增加div的高度。

Answer 1

只需將其添加到您的css中，以便divInfo div將自動擴展以容納其子元素：

.divInfo {
    height: auto;
}

---

帶有偽文本的jsFiddle： https ://jsfiddle.net/AndrewL64/38rxe82m/

嘗試在上面的小提琴中復制粘貼隨機的長句子或列表，然后divInfo會相應地擴展。