CSS flex take remaining space

In a column direction, have an element take up the remaining space using CSS flex

by Checha Man

HTML

<div class="root">
  <div class="elem">
    <select id="dd">
      <option val="1">One</option>
      <option val="2">Two</option>
    </select>
  </div>
  <div class="elem">
    <input type="text" placeholder="name">
  </div>
  <div class="elem" id="remainingSpace">
    <textarea type="text" placeholder="name">
    </textarea>
  </div>
  <div class="elem">
    <button value="Submit">Submit
    </button>
  </div>
</div>

CSS

.root {
  margin: 2%;
  border: 1px solid red;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.elem {
  margin: 2% 0% 1% 1%;
}

textarea {
  resize: none;
}

#remainingSpace {
  flex: 1;
  display: flex;
}