Flexbox的孩子溢出由於填充和利潤率

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%; 
} 

現在的問題是，由於對input[type="number"]和input[type="submit"]的padding和margin，容器（.cart-options）溢出。它看起來像這樣：

通知的金色容器越過的.summary-container的虛線輪廓。

我該如何讓.cart-options不會溢出？

在此先感謝。

Answer 1

主要問題是您使用百分比單位的邊距和填充。

按照flexbox規範的建議，應該避免這種做法。

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

當切換到長的另一單元，諸如像素，問題得以解決：

.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 */ 
 
}

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

---

次要問題可能需要處理彈性項目的最小尺寸。默認情況下，Flex項目的大小不能小於其內容的大小（min-width: auto）。你可以用min-width: 0覆蓋它。下面是一個完整的解釋：

• Why doesn't flex item shrink past content size?