Question

我有这个HTML：

<div class="summary-container">
  <div class="product-name">
    <h2>Product Name</h2>
    <div class="tree">
      <a href="#">Computer Components</a>
    </div>
  </div>
  <div class="price-container">
    <h4>$ XXXX</h4>
    <small>5 left in stock</small>
  </div>
  <form class="cart-options">
    <input id="qty" type="number" min="1" value="1">
    <input type="submit" value="Add To Cart">
  </form>
</div>

这个CSS：

.summary-container {
  display: flex;
  outline: 1px dashed;
}

.tree {
  padding: 1% 0 2%;
}

.price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1%;
  white-space: nowrap;
  margin-left: auto;
}

.cart-options {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
}

input[type="number"] {
  display: inline;
  text-align: center;
  padding: 5% 0;
  margin: 0 5%;
  width: 3em;
}

input[type="submit"] {
  height: 100%;
  padding: 0 20%;
}

现在的问题是由于padding上的margin和input[type="number"]以及input[type="submit"]，容器（.cart-options）会溢出。它看起来像这样：

注意金色的容器越过.summary-container的虚线轮廓。

如何才能使.cart-options不会溢出？

提前致谢。

Answer 1

主要问题是您使用百分比单位作为边距和填充。

根据flexbox规范的建议，应避免这种做法。

Why doesn't percentage padding / margin work on flex items in Firefox?

当您切换到另一个长度单位（例如像素）时，问题就解决了：

＆＃13;

.summary-container {
  display: flex;
  outline: 1px dashed;
}

.tree {
  padding: 1% 0 2%;
}

.price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1%;
  white-space: nowrap;
  margin-left: auto;
}

.cart-options {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
}

input[type="number"] {
  display: inline;
  text-align: center;
  padding: 15px 0;       /* ADJUSTED */
  margin: 0 15px;        /* ADJUSTED */
  width: 3em;
}

input[type="submit"] {
  height: 100%;
  padding: 0 30px;       /* ADJUSTED */
}

＆＃13;

<div class="summary-container">
  <div class="product-name">
    <h2>Product Name</h2>
    <div class="tree">
      <a href="#">Computer Components</a>
    </div>
  </div>
  <div class="price-container">
    <h4>$ XXXX</h4>
    <small>5 left in stock</small>
  </div>
  <form class="cart-options">
    <input id="qty" type="number" min="1" value="1">
    <input type="submit" value="Add To Cart">
  </form>
</div>

＆＃13;

次要问题可能与弹性项目的最小尺寸有关。默认情况下，弹性项不能小于其内容的大小（min-width: auto）。您可以使用min-width: 0覆盖此值。这是一个完整的解释：

Why doesn't flex item shrink past content size?

Flexbox子项由于填充和边距而溢出

1 个答案: