Flexbox children overflow due to padding and margin

Question

I have this 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>

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

Now the issue is that due to the padding and margin on input[type="number"] and input[type="submit"], the container (.cart-options) overflows. It looks like this:

Notice the gold colored container that goes over the dashed outline of .summary-container.

How can I make it so that .cart-options does not overflow?

Thanks in advance.

There's a typo on the first line of your css. you need to prepend a dot. — DraganAscii, Aug 24 '17 at 14:21
@Brian That's not the issue. I slightly modified the code to post here and missed that. Sorry for the mistake though. Fixed. — FarFar, Aug 24 '17 at 14:24
@Michael_B Added `min-width: 0` to `input[type="number"]` and it worked! If you add it as an answer I'll accept it. Could you also explain why it worked? Thanks! — FarFar, Aug 24 '17 at 14:35

score 4 · Accepted Answer · answered Aug 24 '17 at 14:36

The main problem is your use of percentage units for margins and padding.

As recommended by the flexbox spec, this practice should be avoided.

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

When you switch to another unit of length, such as pixels, the problem is resolved:

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

A secondary problem may have to do with the minimum size of flex items. By default, a flex item cannot be smaller than the size of its content (min-width: auto). You can override this with min-width: 0. Here's a complete explanation:

Why doesn't flex item shrink past content size?

Flexbox children overflow due to padding and margin

1 Answers1