This all works perfectly in Chrome on my MBP, but breaks endlessly on the other browsers. I have used, https://autoprefixer.github.io/ to generate the necessary prefixes but to no avail.
Maybe someone can spot where I am going wrong? I striped the prefixed code out because I don't know what is affecting what now, so it's a bit of a blank slate... Heres the code and associated screenshots
Code is modified because of so many diff nested div's in here. Order will be parent > child etc..
.recommendation-modal {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
background: #FFFFFF;
z-index: 202;
width: 100%;
max-width: 800px;
height: 70vh;
.rec-right--container {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
background-color: #4B77BE;
color: #fff;
.rec-right--body {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
height: 100%;
#media (max-width: $screen-sm) {
flex-direction: row;
}
Ended up just needing to add the old syntax, I basically just found every old syntax possible and threw them in there until it worked...
Related
I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}
Got a bit of a weird issue, I've got a lot of overlapping content in IE11 when using flex and flex-direction: column.
I've read a number of answers on here that suggested using flex: 1 and this didn't seem to fix my issue. Anyone got any other suggestions as to what I could be missing here?
Thank you in advance,
Nick
Broken Site URL: http://8b220f.3.ekm.shop
.c-product--compact .c-product__attributes-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.o-grid__item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 1.5rem;
width: 100%;
}
There are some bugs in IE10-11 (and other browsers) implementaion of flexbox - you can read about them here
Try setting flex: 1 1 auto; instead of flex: 1; on flex-children.
I'm looking to display a sticky sidebar on my page, positioned relatively when the client is at the top of the document and fixed when the client scrolls.
My problem is with Safari (it seems to work fine with Chrome and Firefox).
I had it working with a set of floating divs (sidebar floats left) but when I changed to flexbox I found that fast scrolling was too fast for the sticky sidebar to keep up (whether detaching itself from its relative position or staying in a fixed position on the page.
Has anyone else encountered a similar issue and found a work around? I'll go back to floats if necessary but as I'm still learning this stuff it would be great to get to the bottom of why flexbox is causing problems.
Thanks! (Code/markup follows)
HTML:
<div class="order-form">
<div class="left-column" id="left-column">
<div class="sidebar" id="sidebar">
<ul id="courses"></ul>
</div>
</div>
<div class="menu" id="menu"><!-- content --></div>
<div class="right-column"> <!-- content --></div>
</div>
JQuery:
$(window).scroll(function() {
stickers();
});
function stickers() {
var sidebar = $(".sidebar");
if ($(window).scrollTop() > 300) {
sidebar.addClass("scrolling-sidebar");
} else {
sidebar.removeClass("scrolling-sidebar");
}
}
Old, unproblematic, CSS:
.order-form {
padding: 0 300px 0 120px;
}
.sidebar {
width: 150px;
font-weight: lighter;
text-transform: uppercase;
display: block;
}
.sidebar.scrolling-sidebar {
position: fixed;
top: 75px;
left: 5%
}
My current CSS file (compiled from Sass, with problems seemingly arising from my use of flexbox):
.order-form {
margin: 50px 0;
padding: 0 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
position: relative;
}
.order-form .left-column {
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 0;
-moz-flex-basis: 0;
flex-basis: 0;
-webkit-order: 1;
-moz-order: 1;
order: 1; }
#media (min-width: 992px) {
.order-form .left-column {
margin-right: 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 100px;
-moz-flex-basis: 100px;
flex-basis: 100px;
}
}
I'm using flexbox for a layout. My constraint is that the image must be situated at the middle.
I've made a minimal markup that reproduces the issue: http://codepen.io/anon/pen/xwNomN
It works perfectly well in all browsers EXCEPT on IE 10 and 11, where (as shown in the CodePen) a big amount of empty space is added at the top and bottom of the image.
.collection__list {
display: flex;
flex-wrap: wrap;
}
.product-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-item__figure {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
.product-item__figure > a {
display: flex;
position: relative;
flex: 1;
}
.product-item__image-wrapper {
position: relative;
width: 100%;
}
.product-item__image {
display: block;
margin: 0 auto;
max-width: 100%;
}
I've tried a lot of fixes, played with flex-shrink, flex-grow... but after 1 whole day lost, I'd love to know what I'm doing wrong.
Thanks
Oh... I've found it by chance. Adding overflow: hidden to product-item__figure made the trick....
The problem is that in IE10, the width of the columns inside the row is being calculated wrong, it appears to be adding on the width of the column margins (in total 80px), but in Firefox and Chrome it calculates it perfectly and fits everything inside 1260px. The main issue is that i have prefixed everything in what i believe is the right way, but i still get the issue.
You can see it here on jsFiddle - http://jsfiddle.net/andyjh07/ue2zfga6/
CSS:
.row {
width: 100%;
position: relative;
background: red;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
margin-bottom: 40px; }
.row:after {
content: "";
display: table;
clear: both; }
.row *[class^="col-"] {
position: relative;
display: block;
height: auto; }
.row *[class^="col-"]:first-child {
margin-left: 0; }
#media (min-width: 64em) {
.row {
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row; } }
#media (min-width: 78.75em) {
.row {
max-width: 78.75em;
margin: 0 auto; } }
.col-one-third {
width: 100%;
background: blue; }
#media (min-width: 64em) {
.col-one-third {
width: 33.3%;
margin-left: 40px; } }
.col-two-thirds {
width: 66.7%;
margin-left: 40px;
background: blue; }
How it looks on Chrome, IE11, Firefox
How it looks on IE 10, emulated inside IE11's dev console/tools
As you can see, the margin's are being added and going beyond the width of the container
I don't have IE10 available, but it seems like you should look at caniuse.com and the known issues. Or maybe this user moderated list on Github. Or maybe the comment section of the css-tricks guide.
The caniuse site mentions:
IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013.
and
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
The Github site mentions:
When using align-items:center on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11.
Workaround
Most of the time, this can be fixed by simply setting max-width:100% on the flex item. If the flex item has a padding or border set, you'll also need to make sure to use box-sizing:border-box to account for that space. If the flex item has a margin, using box-sizing alone will not work, so you may need to use a container element with padding instead.
This comment on css-tricks shows that where you would normally say flex: 1; you should say -ms-flex: 1 0 auto;
Also, you should change your code where it does something like this:
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
to this:
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
You always want the proper line of code—the one without flags— at the bottom of the prefix list.