Multiline-Flexbox in Ie11 Calculating Widths Incorrectly

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



Leave a reply



Submit