Want wrapped content to expand only downwards with CSS

I have a searchfield that autofills with different quippy lines that may or may not need to wrap to fit all the words. This is anchored to a centered parent that makes sure that the searchfield appears in the middle of the screen. I suspect that it's not exactly what I need, since when the input text needs to wrap to two (or more) rows to fit in the search field that then expands horizontally to envelop the text, it expands both "up" and "down" relative its original "one line" appearance.

What I want is to have the search field expand ONLY down from its original position, and since I'm new to web and especially CSS, I'm unsure as how to go about doing this. I have attached both relevant .css and relevant html-tags bellow.

.center-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-field {
  position: relative;
  background-color: var(--inputFieldBGDark);
  color: var(--textDark);
  border-radius: 30px;
  padding: 10px;
  width: 400px;
  height: fit-content;
  display: flex;
  margin: 5px;
  overflow: hidden;
}

.input-field-text {
  font-family: "Courier New", Courier, monospace;
  flex: 1;
  font-size: 28px;
  font-weight: bold;
  user-select: none;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div className="center-container input-field">
  <img id="search-icon" src="../public/magnifying-glass-dark.svg" alt="Search Icon" className="input-field-icon" />
  <div className="input-field-text">
    <Typewriter options={{ strings: texts, autoStart: true, loop: true, delay: "natural", pauseFor: 2000, cursor: "_", }} />
  </div>
</div>

I've tried to swap around who's parent to whom, looked around for different ways to style boxes to expand reactively to childs content etc. with the hopes of solving the above stated issue, without success...

Solution

You need to make it so that when you center an element vertically, its offset does not depend on its height. The following code is responsible for this:

transform: translate(-50%, 0);

In this case, you will get a side effect where the element will be shifted to the bottom, which can be compensated for by a fixed offset value in pixels. I have this:

transform: translate(-50%, calc(-1 * 86.63px / 2));

In this case, 86.63px is the height of the element in pixels, which I looked at in the browser devtools.

body {
  margin: 0;
  min-height: 100dvh;
  position: relative;
}

.form-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-1 * 86.63px / 2));
  background-color: #f0f0f0;
  padding: 2em;
}

.input-field {
  border: 1px solid;
  width: 100px;
  min-height: 1.3em;
  word-break: break-all;
  background-color: #fff;
}

<div class="form-wrapper">
  <div class="input-field" contenteditable></div>
</div>