KPC
Kevin Powell - Community•15h ago
Patrik

grid same height for second block via aspect ratio

<div class="grid grid-cols-[5fr_3fr] gap-10">
  <div class="h-full overflow-hidden"></div>

  <div class="aspect-[4/5] border border-(--_color) rounded-4xl p-3">
    <div class="rounded-3xl bg-(--_color) size-full"></div>
  </div>
</div>
<div class="grid grid-cols-[5fr_3fr] gap-10">
  <div class="h-full overflow-hidden"></div>

  <div class="aspect-[4/5] border border-(--_color) rounded-4xl p-3">
    <div class="rounded-3xl bg-(--_color) size-full"></div>
  </div>
</div>
hello there i wanna first block which is h-full to have same height as second block (which is have aspect ratio) so i can apply overflow scroll to first block
4 Replies
Patrik
PatrikOP•15h ago
i dont wanna use fixed height if possible since i've already declared aspect ratio i guess i can just apply position absolute for 1 one but its doesnt feel right
Kevin Powell
Kevin Powell•14h ago
Kevin Powell
Kevin Powell•14h ago
I guess the only problem is at smaller sizes, the 5fr 3fr goes out the window. This happens because fr works with available space... It's more like a max-size than anything else. If you want it to always be 5fr 3fr, you'd need to nest an element in the one on the left, and use position absolute like you mentioned: https://codepen.io/kevinpowell/pen/KwwyGxX?editors=1100
Kevin
CodePen
Untitled
...
Patrik
PatrikOP•14h ago
yea seems like this is only way, thanks!

Did you find this page helpful?