html

Question

我是新来的，所以首先欢迎来到我^^
我也是 flexbox 的新手，我只是尝试放置几个 children (.card-user class) 在容器中使用 flexbox (.container-card) 但是，他们无缘无故地超越了他们的 parent。
请问您知道如何解决我的溢出问题吗？

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

感谢您以后的帮助！

Answer 1

我删除了您设置的一些导致 x-axis 溢出的固定宽度。然后我删除了您在 figcaption 上设置的负边距，这会导致您描述的图像出现溢出问题。然后，我根据渲染的大小在每个 card-user 上设置一个 min-width，这样当您水平调整浏览器大小时，内容不会缩小到难以辨认的程度。请参阅我在下面所做的 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>

html - children 超出 parent 元素的 flexbox

html - children exceed the parent element with flexbox

flexbox