Html Question posted in
Some basic documentation can be found here.

Html – Can not set height of child elements to height of parent container with dynamic height

In the following code, I don’t understand how I can set the height of each of the children elements (the ones where the className is ???) to the same height as the container with the ref. I have seen people implement workarounds with absolute positioning, however, I cannot get this to work here because there is more than one child element. Does anyone know how to solve this using css only, or is it strictly necessary to use javascript in this case?

Edit: I might also have to make the height of the container with h-32 dynamic, hence I do not want to use a solution with calculate

<div className="100dvh flex flex-col">
  <div className="h-32">
    {/* Some content */}
  </div>
  <div
    className="relative flex flex-1 justify-between space-x-10 overflow-y-auto"
    ref={ref}
  >
    <div className="flex flex-col items-start">
      <div className="???" />
      <div className="???" />
      <div className="???" />
    </div>
    <div className="sticky top-0 flex h-full w-96 items-center justify-center">
      {/* Some content */}
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
      <div> className="relative flex flex-1 justify-between space-x-10 overflow-y-auto"
    ref={ref}
  >
    <div className="absolute top-0 h-full flex flex-row items-start">
      <div className="h-full" />
      <div className="h-full" />
      <div className="h-full" />
    </div>
    <div className="sticky top-0 flex h-full w-96 items-center justify-center">
      {/* Some content */}
    </div>
 </div>
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Height Child Elements with CSS Grid</title>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px; /* Adjust the gap between child elements as you want */
  }

  .child-element {
    /* Add styles for child elements */
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="child-element">Child 1</div>
  <div class="child-element">Child 2</div>
  <div class="child-element">Child 3</div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search