How can I make a flex item's height expand with the content and stop it from overflowing?

How can I make a flex item's height expand with the content and stop it from overflowing?

This is the JSX:

<div className="app-elements">
    <main>
        <Alert />
        <Routes />
    </main>
    <Footer />
</div>

And this is the css:

.app-elements {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  margin-top: 12vh;
}

main {
  width: 78%;
  padding: 0.45em;
  display: block;
  margin: auto;
  flex-grow: 1;
  min-height: 88vh;
}

My main element wont grow when the content height is higher than its height and it overflows how can I fix this?