0

I've the following configuration:

<div id="grid">
 <div id="unlimited">/* Some data */</div>
 <div id="limited">/* Some other data */</div>
</div>

With the following css:

#grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#limited {
  overflow-y: scroll;
}

The #unlimited should have unlimited height (adjusted to it's content). But #limited should have a max-height: heightOf(#unlimited). Is this possible without using any javascript?

If it's not possible using a grid, can this be done using a flex layout?

The height of the parent container of #grid is not determinated (the height of the parent should be adjusted to match the #unlimited height).

SuperNova
  • 2,792
  • 2
  • 25
  • 34
  • So basically `#limited` has same `max-height` as `#grid` height? Have you tried `max-height: 100%`? – Justinas Oct 25 '21 at 18:55
  • @Justinas Yes, but this does not work, because the height of the parent container of the grid is not limited in height (the #unlimited can not expand if I do so). – SuperNova Oct 25 '21 at 19:00
  • @TemaniAfif Just explain to the questioner. He has edited with a reason for the reopen vote. – m4n0 Oct 26 '21 at 18:24
  • @m4n0 I have nothing to explain because the edit is irrelevant. If he *fully* read the duplicate he will get his answer because I am not defining any explicit height there and everything is defined by the content – Temani Afif Oct 26 '21 at 18:38

0 Answers0