1

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 children. The reason for this is that I can then position the children within the parent as I wish. Is there any way to simply double the height of the parent div?

HTML

.parent {
    width: 100%;
    height: 200% // Does not work
}
dungey_140
  • 2,602
  • 7
  • 34
  • 68
  • Sure, find out what height is currently set (e.g. 500px) and double it in .parent (so new height would be 1000px). – asobak Jul 10 '19 at 10:37
  • 1
    200% is a valid value but this would mean that your element with the class of .parent should also be a child of another element with a specified height.... maybe provide a bit more context – LFX Jul 10 '19 at 10:39
  • Hi @LFX - sorry I should have stated I don't want to specify heights anywhere, I just want to expand as per the content of the children. – dungey_140 Jul 10 '19 at 10:46
  • can you give more context on your real use case? I am pretty sure we can do what you want easily – Temani Afif Jul 10 '19 at 10:51
  • @TemaniAfif Use case - https://stackoverflow.com/questions/56956427/height-of-parent-to-be-double-that-of-child?noredirect=1&lq=1 – Paulie_D Jul 10 '19 at 10:56
  • Hi Paulie. Yes that thread is a duplicate, but I wanted to simplify the question in this thread. The other question is my real-world usage though, for additional context. – dungey_140 Jul 10 '19 at 11:29
  • in the example code you have the height of event elements also set to a percentage... is there a reason why you don't have a fixed height for these elements? – LFX Jul 11 '19 at 08:46

1 Answers1

0

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;
}
<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lobortis lectus, a tincidunt sem. Morbi aliquet est sit amet justo vestibulum sodales.</span>
</div>

<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur</span>
</div>

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415