html - children exceed the parent element with flexbox-CodePudding

I'm new here so first of all Welcome to me ^^
and I'm also novice with flexbox and I just try to place several children (.card-user class) with flexbox in a container (.container-card) but, for no reason they overtake their parent.
Do you have any idea how to solve my overflow problem please?

.bloc-container {
     display: flex;
     width: 50%;
     margin: 0 auto;
     justify-content: space-between;
     flex-flow: nowrap column;
}
 .bloc-container .menu {
     width: 100%;
     text-align: center;
     padding: 10px 0;
}
 .bloc-container .menu ul {
     padding: 0;
     margin: 0;
}
 .bloc-container .menu ul li {
     display: inline-block;
     margin-right: 5px;
}
 .bloc-container .container-card {
     width: 100%;
     min-height: 100%;
     padding: 10px 0;
     text-align: -moz-center;
     text-align: -webkit-center;
     display: flex;
     justify-content: space-between;
     flex-flow: nowrap row;
}
 .bloc-container .container-card .card-user {
     min-width: 45%;
}
 .bloc-container .container-card .card-user .container-item p {
     margin-top: -20px;
     font-size: 0.7rem;
}
 .bloc-container .container-card .card-user .container-item figure {
     max-width: 70%;
}
 .bloc-container .container-card .card-user .container-item figure figcaption {
     font-family: 'Abel', 'Montserrat', serif;
     margin-top: -15px;
     font-size: 2rem;
}
 .bloc-container .container-card form .submit-button {
     margin-top: 10px;
     padding: 7px 15px;
     border: none;
     background-color: #f2f2f2;
}

<div >
        <div >
            <ul>
                <li>PIZZAS</li>
                <li>BURGERS</li>
                <li>SANDWICHS</li>
                <li>CHEESE NAAN</li>
                <li>TACOS</li>
                <li>PANINIS</li>
                <li>PÂTES</li>
                <li>GLACES</li>
                <li>DESSERT</li>
            </ul>
        </div>
        <div >

            <div >
                <div >
                    <div >
                        <figure>
                            <img src="{{ asset('build/images/menu/3jambons.png') }}" alt="3Jambons" />
                            <figcaption>
                                3 JAMBONS
                            </figcaption>
                        </figure>
                    </div>
                    <p>Sélectionner la taille</p>
                    <form>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">JUNIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">SENIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">MÉGA</label>
                        <button >Ajouter au panier</button>
                    </form>
                </div>
            </div>

            <div >
                <div >
                    <div >
                        <figure>
                            <img src="{{ asset('build/images/menu/3jambons.png') }}" alt="3Jambons" />
                            <figcaption>
                                3 JAMBONS
                            </figcaption>
                        </figure>
                    </div>
                    <p>Sélectionner la taille</p>
                    <form>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">JUNIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">SENIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">MÉGA</label>
                        <button >Ajouter au panier</button>
                    </form>
                </div>
            </div>

            <div >
                <div >
                    <div >
                        <figure>
                            <img src="{{ asset('build/images/menu/3jambons.png') }}" alt="3Jambons" />
                            <figcaption>
                                3 JAMBONS
                            </figcaption>
                        </figure>
                    </div>
                    <p>Sélectionner la taille</p>
                    <form>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">JUNIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">SENIOR</label>
                        <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
                        <label for="pizza[3jambons]">MÉGA</label>
                        <button >Ajouter au panier</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

Thanks for any futur help !

CodePudding user response：

I removed some of the fixed widths you had set which were causing overflow on the x-axis. Then I removed the negative margin you had set on the figcaption which was causing the overflow issues with the image that you described. I then set a min-width on each card-user based on the size it was rendering so that when you resize the browser horizontally the content doesn't shrink to the point where it becomes illegible. See the CSS changes I made below.

.bloc-container {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
}

.bloc-container .menu {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.bloc-container .menu ul {
  padding: 0;
  margin: 0;
}

.bloc-container .menu ul li {
  display: inline-block;
  margin-right: 5px;
}

.bloc-container .container-card {
  width: 100%;
  min-height: 100%;
  padding: 10px 0;
  text-align: -moz-center;
  text-align: -webkit-center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.bloc-container .container-card .card-user {
  min-width: 300px;
}

.bloc-container .container-card .card-user .container-item p {
  font-size: 0.7rem;
}

.bloc-container .container-card .card-user .container-item figure {
  max-width: 100%;
}

.bloc-container .container-card .card-user .container-item figure figcaption {
  font-family: 'Abel', 'Montserrat', serif;
  font-size: 2rem;
}

.bloc-container .container-card form .submit-button {
  margin-top: 10px;
  padding: 7px 15px;
  border: none;
  background-color: #f2f2f2;
}

<div >
  <div >
    <ul>
      <li>PIZZAS</li>
      <li>BURGERS</li>
      <li>SANDWICHS</li>
      <li>CHEESE NAAN</li>
      <li>TACOS</li>
      <li>PANINIS</li>
      <li>PÂTES</li>
      <li>GLACES</li>
      <li>DESSERT</li>
    </ul>
  </div>
  <div >

    <div >
      <div >
        <div >
          <figure>
            <img src="https://dummyimage.com/200/000/fff" alt="3Jambons" />
            <figcaption>
              3 JAMBONS
            </figcaption>
          </figure>
        </div>
        <p>Sélectionner la taille</p>
        <form>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">JUNIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">SENIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">MÉGA</label><br>
          <button >Ajouter au panier</button>
        </form>
      </div>
    </div>

    <div >
      <div >
        <div >
          <figure>
            <img src="https://dummyimage.com/200/000/fff" alt="3Jambons" />
            <figcaption>
              3 JAMBONS
            </figcaption>
          </figure>
        </div>
        <p>Sélectionner la taille</p>
        <form>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">JUNIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">SENIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">MÉGA</label><br>
          <button >Ajouter au panier</button>
        </form>
      </div>
    </div>

    <div >
      <div >
        <div >
          <figure>
            <img src="https://dummyimage.com/200/000/fff" alt="3Jambons" />
            <figcaption>
              3 JAMBONS
            </figcaption>
          </figure>
        </div>
        <p>Sélectionner la taille</p>
        <form>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">JUNIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">SENIOR</label>
          <input type="radio" id="pizza[3jambons]" name="pizza[3jambons]" checked>
          <label for="pizza[3jambons]">MÉGA</label><br>
          <button >Ajouter au panier</button>
        </form>
      </div>
    </div>
  </div>
</div>