Menu
The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent:
<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black"> <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box"> LHS </div> <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box"> RHS </div> </div> Here's the fiddle:
http://jsfiddle.net/GY4F4/6/
How can I eliminate the overflow when flex children have padding? box-sizing: border-box doesn't work.
393
With the CSS box-sizing Property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now! Hooray!
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
I had similar problems with flexbox and box-sizing: border-box;. The latter one just doesn't seem to work in IE. Width wouldn't work in this case since padding will change it - but if you can use max-width, that should fix the problem.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
