0

I have the following <p> with class description and I want it to fill the remaining empty space of its container div (summary-container):

<div class="summary-container">
  <h2>Title here</h2>

  <p class="description">Lorem ipsum dolor sit amet, conoasnasdnaonaosnasodnoasd ad
    dnandoanoadn oandoasnoasdn osandoand ods asnadnsoasdndsanasdn
    dnandoanoadn oandoasnoasdn osandoand ods asnadnsoasdndsanasdn
    dnandoanoadn oandoasnoasdn osandoand ods asnadnsoasdndsanasdn
    dnandoanoadn oandoasnoasdn osandoand ods asnadnsoasdndsanasdn
  </p>
</div>

this are my styles:

#what-to-do .summary-container {
  float: left;
  background: red;
  width: 190px;
  height: 100px;
  margin-left: 10px;
}


#what-to-do .description {
  background: cadetblue;
}

But this is how it looks:

enter image description here

I want it to fill the part as the black lines show In this demo of ionic it works just how I want it to work.

So weird!!!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150

1 Answers1

0

Well I just checked with chrome debugger and that div is inside an ionic list item which it's giving it some properties so I changed this and now its working:

#what-to-do .description {
  white-space: normal;
}