Width of flex container is behaving differently in 2 cases

Question

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.

Answer 1

the input-container is a flex item (unlike the gallery which is not inside a flex container) so its width will be "shrink-to-fit" especially that you are centering it.

Either remove the centering and the default "stretch" behavior will give you want you want.

main {
  display: flex;
  /*align-items: center; removed */
  flex-direction: column;
}

#input-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 500px;
  /*margin: 0 auto; removed */
  justify-content: center;
  border:1px solid red;
}

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

or add width: 100% in case you want to keep the element centred (which I think you want)

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; no needed, align-items is enough */
  width: 100%;
  justify-content: center;
  border:1px solid red;
}

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