Width of flex container is behaving differently in 2 cases

In my first case there is a gallery which is declared a flex container. Its width grows as you increase the width of the viewport.

<div class="gallery"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg"><img src="6.jpg"><img src="7.jpg"><img src="8.jpg"><img src="9.jpg"></div>

CSS for the above html

.gallery {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;  align-items: center;  gap: 16px;  max-width: 1400px;  margin: 0 auto;  padding: 20px 10px;}.gallery img {  width: 100%;  max-width: 350px;  height: 300px;  object-fit: cover;  border-radius: 10px;}

In the second case, there is a input container which is a flex container which is inside a parent flex container , but its width is not growing and is fixed when the viewport width changes.

<main><section id="input-container"><label for="input-decimal">Enter the decimal number</label><input type="text" ></section></main>

css for the above.

main{    display:flex;    align-items: center;    flex-direction: column;}#input-container{    display:flex;    flex-direction: row;    flex-wrap:wrap;    max-width: 500px;    margin:0 auto;    justify-content: center;;}

I was wondering why is this happening.