如何调整div高度以根据动态生成的文本进行扩展？

Question

I'm receiving a description for a product through an API call of a service. This description, can be potentially to big to not fit on my div. This is my initial 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>

And this is what looks like:

And when the user clicks on the 'Ler mais' button should display the text, and if not fit in div, should increase the div. This is what looks like when the user clicks on the button

I would like the two first paragraphs Lorem would be entire displayed inside the div , even with the div height must be increased.

Answer 1

Just add this to your css so that the divInfo div will expand automatically to accommodate it's child elements:

.divInfo {
    height: auto;
}

---

jsFiddle with dummy text: https://jsfiddle.net/AndrewL64/38rxe82m/

Try copy-pasting random long sentences or lists in the fiddle above and the divInfo will expand accordingly.