I am not able to increase the width of my flexbox

Problem

I am creating an image gallery using flexbox layout.

I want bigger/proper width for images displaying in flex box layout.

It is getting shrunk up and I cannot understand why. I would like to increase the width of elements but I cannot increase the width of it.

I want a bigger width for each flex child.

I am new to web development.

.bowl_images {
  display: flex;
  max-width: 95%;
  width: 95%;
  margin: auto;
  background-color: #052F1A;
  gap: 10px;
}

.bowl_images_section_1 {
  display: flex;
  background-image: url(./images/piece-1.jpg);
  background-size: contain;
  width: 100%;
  height: 400px;
  background-position: 0% 0%;
  background-size: 100% 100%;
}

.bowl_images p {
  display: flex;
  font-size: 12px;
  background-color: #FF72B5;
  color: #052F1A;
  padding: 3px;
  margin: auto;
  border-radius: 3px;
  text-wrap: wrap;
}

<div class="bowl_images">
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
  <div class="bowl_images_section_1">
    <p>Original Pieces</p>
  </div>
</div>

Solution

Hear, you can add the max-width to the child element as per you need the child width. I add the flex-wrap:wrap property to the flexible items should wrap. When your child's size does not get enough space to move from one row to the next row.

.bowl_images_main_section {
    display: flex;
    flex-wrap: wrap;
    max-width: 95%;
    width: 95%;
    margin: auto;
    background-color: #052F1A;
    gap: 10px;
}


.bowl_images_section_1 {
    display: flex;
    background-image: url('https://picsum.photos/200/300');
    width: 100%;
    max-width: 225px;  /* Here you change max-width value as you need */
    height: 400px;
    background-position: 0% 0%;
    background-size: 100% 100%;

}

.bowl_images p {
    display: flex;
    font-size: 12px;
    background-color: #FF72B5;
    color: #052F1A;
    padding: 3px;
    margin: auto;
    border-radius: 3px;
    text-wrap: wrap;
}

<div class="bowl_images_main_section">
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
</div>