This question already has answers here:
Flexbox code working on all browsers except Safari. Why?
(3 answers)
Closed 5 years ago.
The chart below works on Chrome and Firefox, but Safari is shrinking the width of the boxes. This is also happening on mobile clients. I'm including the css for the chart container and a codepen to the complete markup and css.
https://codepen.io/juancho1/pen/akyNmp
#chart-container{
width: 100%;
height: auto;
border: 1px solid #39c3ec;
/*display: -webkit-box;*/
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll !important;
}
I'm hoping someone has come across this specific issue before. While looking for a possible solution I saw that Safari has some issues with flexbox, and tried most of the solutions I've seen. It may be also related to the flex direction.
I'd appreciate any tips anyone may have!
Thanks
Update
As much as I love the upvotes I've been getting randomly, I've realized I made a pretty big mistake in my original post. The default flex value is 0 1 auto not 1 0 auto. However, this only adds to the reasoning behind why setting flex-shrink to 0 would keep flex items from shrinking, it just doesn't explain why they weren't shrinking in all browsers.
Original Post
I've ran into this issue before. On most other browsers, flex is automatically set to 1 0 auto, which is short for saying flex-grow: 1; flex-shrink: 0; flex-basis: auto;. flex-shrink: 0; should prevent the boxes from shrinking, but it seems safari does not automatically set this property. Simply set flex-shrink to 0 on your flex items and they will not shrink anymore.
Related
This question already has answers here:
Text in a flex container doesn't wrap in IE11
(13 answers)
Closed 4 years ago.
I have a Flexbox container that's part of a two column container. This all looks good in Chrome, FF, etc except IE11. It has two children:
.container
h3 Title
p body
and my container:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 45px 25px;
position: relative;
and it looks like this in IE11:
where it's cut off on both sides.
I've tried adding flex-basis, flex: 0 1 [...], max-width, overflow: hidden but to no avail. It still won't stop the cut offs. Is there anything i'm doing wrong?
I fixed it. Weirdly adding width: 100% to my p tag fixes it.
When viewing the following demo on IE11, there is an issue in which the content is displayed aligned right and pushed outside of the screen.
Codepen Demo
Here is the code that justifies the content center:
.search-results {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
You can see the issue in this screenshot here:
I'm using browserstack IE 11 on windows 10 to emulate.
It seems to be calculating the width of the flex wrapper greater than it actually is. No amount of setting max-/width on the element, HTML or body seems to fix it. I understand IE11 has some flaky support for flexbox, is there a property I'm missing? Vendor prefixes are being added by Codepen, so I should be covered on that basis.
Flex-basis should be set to avoid these problems in IE. Change the flex property of the ".search-results__list" to flex: 0 1 712px. Check the example below:
http://codepen.io/anon/pen/QKKpGx
IE 10-11 don’t allow unitless flex-basis values in the flex shorthand.
For more info: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
So my logo doesn't go to the left properly in Safari browser only, I was wondering what's wrong with it
thanks
For the flex container always use prefixes (which you already do).
If you want to align logo to the left, simply add
flex-wrap: nowrap;
Another good practise with flexboxes for safari is always use flex property.
like so
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
P.S. This might be an good article to start with
the thing is if you use flex-direction: column; in Safari , you have to also mention flex-wrap: nowrap; otherwise it will add the width of each flex-item to it's parent container, thanks to Sergey for hinting that.
I am using a flexbox layout that is usually presented as a row but when the screen is a certain width it switches to column. This works fine in Chrome, Firefox, Safari and Edge but on IE 11 the flex elements will not center even though I am using justify-content: space-around;
I have looked at https://github.com/philipwalton/flexbugs and other websites that list flexbox bugs and I can't seem to find the solution.
I have distilled it down to a simple example to demonstrate the problem.
First we have a container that spans the width of the screen with the following properties:
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
width: 100%;
}
Then inside it we have four cells with the following properties:
.cell {
flex-grow: 2;
text-align: center;
display: inline-block;
background-color: green;
margin: 5px auto;
min-width: 50px;
max-width: 20%;
}
On IE the four cells are aligned left, but on any of the other browsers the cells are center aligned.
Here is an artist's impression of the situation
I have created a JSFiddle that demonstrates the issue at https://jsfiddle.net/8w1gf7vx/4/
You are using the wrong property - justify-content is for alignment on the main axis. Your flex-direction is column, therefor the main axis goes from top to bottom - and so all justify-content does here is influence the distribution of space above and below your items.
You want to align your items on the cross axis - and the property to achieve that is align-items.
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
https://jsfiddle.net/8w1gf7vx/6/
text-align: center; and display:inline-block from the items can be removed - unless you want to use those as a fallback for browsers that don't understand flexbox. (I suspect they might be the reason that what you had seemed to work as intended in other browsers. As Oriol pointed out in comment, that's rather due to margin-left/-right being auto - and that IE doesn't seem to support that.)
http://flexboxfroggy.com/ is a nice way to get a better understanding of what the different flex properties do, in the form of a little game - might be worth a look for anyone who still struggles a bit with flexbox now and then (and that includes myself ;-)
Disclaimer: I am not affiliated with that site in any way, I just think it is quite useful in gaining a better understanding of flexbox.
I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.
The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.
This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting
.about-us-nav {
display: flex;
align-items: center;
justify-content: center;
}
.about-us-nav a {
font-size: 20px;
color: #52361D;
background-color: #885A31;
border-color: #52361D;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.how-help-container {
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
z-index: 2;
}
There are two things you should consider:
When you apply display: flex to an element it becomes a flex container which comes with several default styles.
One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.
Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).
From your question:
The problem is that with the flex style properties, when the window
is <768px ideally the content would change layout and each col-md-4
would stack on top of one another. This is not happening, instead the
columns just become really skinny and are displayed still side by
side.
It sounds like the flex items are not wrapping. Try adding this to the flex container:
flex-wrap: wrap;
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
#media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
Note on browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.