Double height of parent div?

Question

I am trying to achieve something that I assumed would be quite simple. In the below code, I want to make the parent height 200% of its current height, which is based on its chil

Answer 1

Here is hack using CSS grid. In the below code the span element will have twice the height of its content but you will also have an overflow:

.box {
  width: 200px;
  display: inline-grid;
  grid-template-rows: 200%;
  border: 2px solid;
}

span {
  background: red;
}

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lobortis lectus, a tincidunt sem. Morbi aliquet est sit amet justo vestibulum sodales.



  Lorem ipsum dolor sit amet, consectetur

Detailed explanation here: https://stackoverflow.com/a/52137966/8620333