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.
Related
I am having an issue with flexbox wrap on iPad. When emulating iPad in Chrome developer tools I get the result I want, all the items wrapping and displaying correctly. However, when I test using Browserstack on a physical iPad the first and last item inside the flex container do not behave the same, please see the images below for comparison.
Dev Tools iPad Emulation
Browserstack iPad / Physcial Device
I have been browsing other peoples solutions on here but to no avail. Here is the SASS snippet with solutions people have provided on other questions added, but still not working. Have also added a link to the page in question below so it can be inspected easier.
This is my Css
.blogPageCards {
display: flex;
flex-wrap: wrap;
flex-direction: row;
.articleCard {
flex-direction: column;
width: calc(50% - 30px);
margin: 0px 15px;
&:before {
display: none;
content: normal;
}
&:after {
display: none;
content: normal;
}
}
}
http://nevillejohnson.dev.clicky.co.uk/inspiration/
Please let me know if you need any more information. Thanks in advance.
As i am unable to write comment, i am writing it here.
I think it is not working because your browser(i assume it is IOS Safari)needs css vendor prefix to implement the flexbox.
I am unsure which IOS Safari version is your Ipad using but if it is between 3.2 - 6.1 you surely must put -webkit- before the flexbox like this
.blogPageCards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
.articleCard {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: calc(50% - 30px);
margin: 0px 15px;
&:before {
display: none;
content: normal;
}
&:after {
display: none;
content: normal;
}
}
}
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...
I am using this template for a small portfolio webpage. The problem is that when the website is opened in Chrome, a scrollbar always appears on the main page as shown below:
This does not happen in Firefox, Edge and IE. Here is a link to the demo of the template and here a jsfiddle with the CSS. Both display the unnecessary scrollbar when Chrome is used. I tried adding the following line to the html file but it didn't help:
.content {
overflow: hidden;
}
I hope that somebody can help me out here. Thanks!
Edit: The problem is somewhere here, but I cannot figure out a way to fix it.
#wrapper {
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;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
position: relative;
min-height: 100vh;
width: 100%;
padding: 4rem 2rem;
z-index: 3;
}
#wrapper:before {
content: '';
display: block;
}
I'm on Chrome and I'm not seeing any scrollbar when I visit your demo. Or the fiddle for that matter
Not completely sure why this occurs (can indeed see the same issue) but it's super easy to workaround by simply applying overflow-y: hidden to the body
body{
overflow-y: hidden;
}
Is there something overwriting your call to hide the scroll bar elsewhere on the page? E.g:
overflow: auto;
Or is it perhaps another element on a page with a width/height (e.g image or div element) that is causing the issue?
Another option is to go to the inspector and start deleting items until you find out which one is causing the issue.
In IE10, this code isn't working correctly:
.flexbox form {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flexbox form input[type=submit] {
width: 31px;
}
.flexbox form input[type=text] {
width: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex: auto 1;
-moz-flex: auto 1;
-ms-flex: auto 1;
-o-flex: auto 1;
flex: auto 1;
}
What should happen is that input[type=submit] should be 31px wide, with input[type=text] taking up the rest of the available space within form. What happens is input[type=text] just defaults to 263px for some reason.
This works fine in Chrome and Firefox.
Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE):
http://css-tricks.com/using-flexbox/
edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/
As Ennui mentioned, IE 10 supports the -ms prefixed version of Flexbox (IE 11 supports it unprefixed). The errors I can see in your code are:
You should have display: -ms-flexbox instead of display: -ms-flex
I think you should specify all 3 flex values, like flex: 0 1 auto to avoid ambiguity
So the final updated code is...
.flexbox form {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
/* Direction defaults to 'row', so not really necessary to specify */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flexbox form input[type=submit] {
width: 31px;
}
.flexbox form input[type=text] {
width: auto;
/* Flex should have 3 values which is shorthand for
<flex-grow> <flex-shrink> <flex-basis> */
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-o-flex: 1 1 auto;
flex: 1 1 auto;
/* I don't think you need 'display: flex' on child elements * /
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/**/
}
IE10 has uses the old syntax. So:
display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */
see css-tricks.com/snippets/css/a-guide-to-flexbox:
(tweener) means an odd unofficial syntax from [2012] (e.g. display: flexbox;)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Why doesn't the following code work in IE10?
.foo {
display: -ms-flex;
-ms-justify-content: center;
}
What do I need to write in order for them to work?
IE10 implemented the Flexbox draft from March 2012. Those properties correspond to these:
.foo {
display: -ms-flexbox;
-ms-flex-pack: center;
}
A good place to start when trying to get the syntax right for all browsers is http://the-echoplex.net/flexyboxes/
For centering elements horizontally and vertically within a container you'll get code something like this: (working in Chrome,FF,Opera 12.1+ and IE 10+)
FIDDLE
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
CSS
.flex-container {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-item
{
width: 100px;
height:100px;
background: brown;
margin: 0 10px;
}
/*
Legacy Firefox implementation treats all flex containers
as inline-block elements.
*/
#-moz-document url-prefix() {
.flex-container {
width: 100%;
-moz-box-sizing: border-box;
}
}