Vue js component do not fill the empty space

Question

I am trying to create a file upload component for a web application. In its current state, it looks like this.

I would like to expand it to the right side till there is no empty space left. The code for this component is this

<template>
  <div id="app" class="container">
    <h1>CSV Upload</h1>
    <div
      class="upload-area"
      @dragover.prevent="handleDragOver"
      @drop.prevent="handleFileDrop"
      @click="triggerFileInput"
    >
      Drag and drop a file here or click to select
    </div>
    <input
      type="file"
      id="fileInput"
      ref="fileInput"
      @change="selectFile"
      accept=".csv"
      style="display: none"
    />
    <button @click="uploadFile" :disabled="!selectedFile">Upload</button>
    <div>{{ uploadStatus }}</div>
  </div>
</template>

and the css is this

.container {
  display: flex;
  flex-direction: column;
}

.upload-area {
  flex-grow: 1; /* Allow the upload area to grow and fill available space */
  border: 2px dashed #ccc;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  background-color: #f9f9f9;
}

h1, button, div {
  margin-bottom: 10px; /* Space between elements */
}

I tried adding flex-grow: 1; but it didnt work.