How can I set the height of an element to the computed height of another one?

Question

I have a form and an ul inside a flexbox.

I have set the height of ul manually. *not what I want tho

How can I set the height of ul to the computed height of form?

• Do not use ref
• Check styles.css

Answer 1

I think this does more or less what you want.

I've changed the html, by including an extra div. I've commented the changes to the css.

The basic principle is this: make the height of the section depend only on the height of the form, by removing the ul from the flow, using position:absolute. Then set max-height for the ul to 100%, which will be 100% of the section... which in turn is derived from the height of the contained form.

section {
  display: flex;
  gap: 16px;
  position:relative; /* position relative means contained items are relative to this */
}

form {
  background-color: cadetblue;
  
}

ul {
  position:absolute; /* position absolute means the size of this block doesn't affect the height of the container */

  max-height:100%; /* 100% of the containing section, which has position:relative */
  margin: 0px;
  background-color: chocolate;
  overflow: auto;
}

<section>
      <form>
        <h1>Form</h1>
        <button>Submit</button>
      </form>
      <div>
      <ul>
        <li>Adobe</li>
        <li>Amazon</li>
        <li>Apple</li>
        <li>Facebook</li>
        <li>Google</li>
        <li>Microsoft</li>
        <li>Netflix</li>
      </ul>
      </div>
    </section>

Answer 2

First, set the section container position to relative. Then, to make the form box adjust to the content use height: fit-content;. Finally, for the ul box use position: absolute;, max-height: 100%; and overflow: scroll;.

See example below.

section {
  position: relative;
  display: flex;
  gap: 16px;
}

form {
  height: fit-content;
  background-color: cadetblue;
}

ul {
  position: absolute;
  max-height: 100%;
  margin: 0px;
  background-color: chocolate;
  overflow: scroll;
}

<section>
  <form>
    <h1>Form</h1>
    <button>Submit</button>
  </form>
  <div>
    <ul>
      <li>Adobe</li>
      <li>Amazon</li>
      <li>Apple</li>
      <li>Facebook</li>
      <li>Google</li>
      <li>Microsoft</li>
      <li>Netflix</li>
      <li>Adobe</li>
      <li>Amazon</li>
      <li>Apple</li>
      <li>Facebook</li>
      <li>Google</li>
      <li>Microsoft</li>
      <li>Netflix</li>
    </ul>
  </div>
</section>