multiline-flexbox in IE11 calculating widths incorrectly?
It looks like a bug where box-sizing
is not being taken into account when calculating the size using the flex
property. As the border takes up 2px, it is larger than 50% and thus only one fits on a line, so all boxes are stretched to the full width. You can see the same thing happening if you disable the border and add 2px padding instead.
You can make it work correctly while keeping the borders by adding max-width: 50%
to the .box
ruleset. Otherwise you can use a flex value between 33.34% and 49%. This will make the width less than 50% including the border, and as the elements grow to fill available space, they’ll still be 50% of the flex container. Kind of a ugly hack, but it will work unless you add a combined border and padding larger than 50% minus the flex value you set.
Perhaps a better way than decreasing the percentage value directly is to use calc()
. This is supported by all browsers that support the modern Flexbox syntax. You just need to subtract the combined total of the left and right paddings and margins from the percentage value you want to use. As you‘re doing this you don’t really need the box-sizing property so it can be removed. There seems to be another issue in IE where you can’t use calc in the flex
shorthand but you can use it in the flex-basis
property, which is the one you want.
.box {
border: 1px solid black;
/* additional styles removed for clarity */
/*
50% - (border-left-width + border-right-width +
padding-left + padding-right)
*/
-webkit-flex-basis: calc(50% - 2px);
flex-basis: calc(50% - 2px);
}
See the demo: http://jsfiddle.net/dstorey/78q8m/3/
Nested Flexbox breaks in IE11
IE11 requires an unit in flex-basis (3rd value of flex property) and according to source, when you set flex: 1
it actually equals to flex: 1 1 0
.
Try changing each of the flex
properties from flex: X
to flex: X 1 auto
flexbox - wrapping at smaller dimensions
Your boxes are stacking because your borders are adding width to your boxes.
You can add box-sizing: border-box
to your .box
class so that the widths are applied inward instead of outward.
Note: For new web sites, you may wish to begin with
box-sizing
set toborder-box
. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.
.stock-info { display: flex; width: 600px; margin: 30px auto; font-size: calc(10px + 1.1vw); border-left: 1px solid #777777; border-top: 1px solid #777777;}
.stock-info .box { flex: 1; margin: 0; padding: 0; height: 150px; border-right: 1px solid #777777; border-bottom: 1px solid #777777; box-sizing: border-box;}
@media screen and (max-width: 650px) { .stock-info { width: 300px; flex-wrap: wrap; } .stock-info .box { flex-basis: 150px; }}
<div class="stock-info"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div></div>
How to specify line breaks in a multi-line flexbox layout?
The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%
), they will force a line break.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(4n - 1) {
background: silver;
}
.line-break {
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="line-break"></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="line-break"></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="line-break"></div>
<div class="item">10</div>
</div>
Related Topics
How to Remove All Default Webkit Search Field Styling
Translate X and Y Percentage Values Based on Elements Height and Width
Two CSS Files Defining Same Class
Ml-Auto Is Not Pushing Navbar Links to the Right
How to Apply Custom Animation Effect @Keyframes in Mui
Using a Custom (Ttf) Font in CSS
Css: Transform: Translate(-50%, -50%) Makes Texts Blurry
Tint Image Using CSS Without Overlay
Absolute Positioning in Gmail Emails
CSS Transition Opacity Fade Background
<Img /> VS Background-Image (Css) in Performance