如何让一个输入元素占据所有可用的垂直空间？

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 100% viewport height */
  }

  .input-element {
    flex-grow: 1;
  }
</style>

<div class="container">
  <input type="text" class="input-element">
</div>

<style>
  .container {
    display: grid;
    height: 100vh; /* 100% viewport height */
    grid-template-rows: 1fr;
  }

  .input-element {
    height: 100%;
  }
</style>

<div class="container">
  <input type="text" class="input-element">
</div>