CSS width 100% not working on relative element

Question

I'm trying to make a div element fill the height of its parent container, but the h-full class isn't working. I also tried min-h but it also not working Here's the relevant code:

<div className='flex justify-center items-center'>
      <div
        className='w-[700px] h-full border-none rounded-md relative'
        style={{
    padding: `${framePadding}px`,
    background: `${frameBg.startsWith('#') ? frameBg : '#' + frameBg}`,
  }}
      >
        <textarea
          ref={inputRef}
          placeholder='Enter HTML Source Code'
          id='editing'
          spellCheck='false'
          onInput={() => {
            onCodeChange(inputRef.current.value)
            sync_scroll(inputRef.current)
          }}
          onScroll={() => sync_scroll(inputRef.current)}
          onKeyDown={(event) => check_tab(inputRef.current, event)}
        ></textarea>
        <pre id='highlighting' aria-hidden='true'>
          <code className='language-html' id='highlighting-content'></code>
        </pre>
      </div>
    </div>

Relevant CSS code:

#highlighting {
  margin: 10px;
  padding: 10px;
  border: 0;
  width: -webkit-fill-available;
  max-width: 700px;
  height: 150px;
}
#editing,
#highlighting {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* Move the textarea in front of the result */

#editing {
  z-index: 1;
}
#highlighting {
  z-index: 0;
}

#editing {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}

/* Can be scrolled */
#editing,
#highlighting {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}

What I want What I get

What I get:

what i get

What I want:

what i want