html - children exceed the parent element with flexbox

user_18334080 0
Viewed 37

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 class="container bloc-container">
        <div class="menu">
            <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 class="container-card">

            <div class="card-user">
                <div class="container-item">
                    <div class="container-img">
                        <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 class="submit-button">Ajouter au panier</button>
                    </form>
                </div>
            </div>

            <div class="card-user">
                <div class="container-item">
                    <div class="container-img">
                        <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 class="submit-button">Ajouter au panier</button>
                    </form>
                </div>
            </div>

            <div class="card-user">
                <div class="container-item">
                    <div class="container-img">
                        <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 class="submit-button">Ajouter au panier</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

Thanks for any futur help !

flexbox html
1 Answers

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 class="container bloc-container">
  <div class="menu">
    <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 class="container-card">

    <div class="card-user">
      <div class="container-item">
        <div class="container-img">
          <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 class="submit-button">Ajouter au panier</button>
        </form>
      </div>
    </div>

    <div class="card-user">
      <div class="container-item">
        <div class="container-img">
          <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 class="submit-button">Ajouter au panier</button>
        </form>
      </div>
    </div>

    <div class="card-user">
      <div class="container-item">
        <div class="container-img">
          <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 class="submit-button">Ajouter au panier</button>
        </form>
      </div>
    </div>
  </div>
</div>

user_164963570
Related