Height: max-content; for chatbox do not set height to max content

* {
  padding: 0;
  margin: 0;
}

#outer-wrap {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
      height: 100%;
  background: red;
}

#outer-wrap > * {
  background-color: gray;
  border: black 1px solid;
  margin: 1px;
}

#text {
    /* height: clamp(3rem, max-content, 50%); */
    overflow-y: auto;
    overflow-wrap: break-word;
    border: black 3px dotted;
    white-space: pre-wrap;
    outline: none;
    font-size: 2rem;
    color: black;
    border-radius: 1vh;
    resize: none;
    height: max-content;
  max-height: 50%;
}

.message-panel-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

<div class="message-panel-wrapper">
                <div id="outer-wrap">
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
                </div>
                <div contenteditable="true" id="text"></div>
            </div>