html-子元素超過了帶有flexbox的父元素-有解無憂

我是新來的，所以首先歡迎來到我 ^^
，我也是 flexbox 的新手，我只是嘗試將幾個.card-user帶有 flexbox 的孩子（類）放在一個容器（.container-card）中，但是，他們無緣無故地超過了他們的父母。
你知道如何解決我的溢位問題嗎？

.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>

感謝您的任何未來幫助！

uj5u.com熱心網友回復：

我洗掉了一些您設定的導致 x 軸溢位的固定寬度。然后我洗掉了您設定的負邊距，figcaption這導致您描述的影像出現溢位問題。min-width然后我根據它呈現的大小在每個上設定一個，card-user這樣當您水平調整瀏覽器大小時，內容不會縮小到難以辨認的程度。請參閱我在下面所做的 CSS 更改。

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434320.html

標籤：html 弹性盒

上一篇：如何在畫布上繪畫，按住滑鼠而不點擊

下一篇：如何在Y軸和X軸CSS中調整圖片大小