display flex not working on safari

Please try us on a desktop Our app relies on some desktop browser features to render design files and interactable code. Unfortunately, we haven't been able to make these work on mobile yet. Please try Kombai using a chromium based browser on desktop.

Flex 'Not Working'? 6 Most Common Flexbox Issues on Stack Overflow

Published on: April 9, 2023

1. Are you using the correct syntax?

2. are you using 'display:flex' at the correct element (immediate parent), 3.are you using flex-grow, flex-shrink and flex-basis correctly, 4. are media queries overriding some of your desired properties, 5. automatic minimum size of flex items, 6. if you are using justify-content, remember that default width is auto:, 7. if your issue is happening in some specific browsers/ devices, wrapping up.

Flexbox is easily one of the most powerful developments in CSS ever. But, its implementation has been confounding frontend and fullstack devs ever since it was introduced.

In the last year alone, 6,000+ new threads were posted on Stack Overflow with questions/issues on CSS flex (Source: Stack Overflow search )!

Similarly, Reddit, Quora, and every other platform that developers frequently use are also riddled with devs struggling to get this very powerful but often confusing concept to work for them.

We read through a few hundred threads across platforms to find these 7 issues that crop up most frequently when devs think that flex is not working for them.

If you think some flex related properties are not working in your code, go through these checks quickly to make sure that you are not making the same errors as those thousands of devs :-)

Make sure you are using the correct and latest CSS syntax throughout the code, particularly if you don’t write CSS too often.

It’s often easy to overlook small errors in CSS selectors or property names because default IDEs don’t do a good job at highlighting errors.

You’d be surprised how many times we have discovered display:flexbox instead of display:flex while reviewing our own code!

Consider using a CSS linting tool like Stylelint , which is great at spotting unintentional errors and enforcing best practices.

Fun(?) fact: display: box and display: flexbox used to be the correct syntax in the olden times, way back in 2009 and 2012!

Remember that display:flex makes the direct children of the container it’s applied to, flex items. So, you’ll have to apply display:flex to the immediate parent of the items you want to distribute using flex.

Also, this applies to every level of your div structure. So, if you want to flex an element within a flex element, you must do it twice for both containers. For example, see the code below.

flex-grow : This property defines the ability of a flex item to grow beyond its initial size to fill any available space within a flex container.

flex-shrink : This property defines the ability of a flex item to shrink below its initial size to fit within the available space within a flex container.

flex-basis : This property defines the initial size of a flex item before any available space is distributed among the items in the container.

Here are 2 Stack Overflow examples on how these properties work-

Example 1 :

In the above code, 50% of 300px, i.e, 150px is immediately assigned to the first item because of flex-basis: 50%;

The remaining 150px space is initially empty because the flex-basis of the other two items is 0. Later on, it's divided into all three items equally because each of them has flex-grow: 1 , making them 200px, 50px, and 50px respectively.

Example 2 :

In the above code, the flex items have flex-grow: 1 for equal distribution of space but don't have flex-basis and therein lies the point. When you miss to assign a specific flex-basis value to your flex items, its default value becomes auto and the width distribution will be done according to the content size.

To fix this issue, also add flex-basis: 0 . Flex basis will ensure that there is no default distribution of width and the entirety of it then will be distributed equally among the items because of flex-grow: 1 .

If you want to understand these properties in much more detail, check out this guide by CSS Tricks.

If you are building a UI where certain elements are to be same irrespective of the device and screen, make sure that media queries are not overriding those default properties that need to work on each screen.

In the above example , the property flex: 0 0 100%; was overridden by flex: 0 0 calc(50% - 1rem); in the media query and therefore the user was not getting the desired output in the UI.

All flex items have an automatic minimum size min-width: auto or min-height: auto on the main axis to avoid shrinking past its content. Remember that it works only for the main axis, so if the flex-direction is row, only min-width will become auto and if the flex-direction is column, then only the min-height become auto.

Minimum width or height when set to auto allows flex items to change their size to accommodate the content properly. You can, however, override this default behavior by setting min-width: 0 in row-direction and min-height: 0 in column-direction.

Here's an example of this issue-

Note: In case you want to convert your email templates to HTML code, check out Kombai For Email .

One important thing to keep in mind is that if you are not explicitly giving a fixed width to an element, then the default width is auto.

An element with the width:auto will take up the smallest needed space for the content and will shrink or expand accordingly to fit its content.

In such cases , justify-content will not work as intended because all the available space has already been covered by the content itself and there is no extra space for justify-content to align the flex items. This problem can be solved by giving a fixed width to the element.

Sometimes, the code you write is correct but it doesn't conform to the ways flex used to work earlier. As a result, it doesn't work as intended on some old browser versions.

In the above example , the flex layout is not working on some iPads. This is because it is missing the -webkit- syntax that must be used for iPads that have Safari version 6.1 or less.

Here are a few tools and guides that will help you identify and solve cross-browser compatibility issues-

Autoprefixer CSS online - Autoprefixer is a tool that automatically adds vendor prefixes to your CSS code. Vendor prefixes are extra code added to CSS properties to ensure they work correctly on different browsers. For example: -webkit- , -ms- , and -moz- .

Can I use - This tool shows up-to date browser support tables for various web technologies, including CSS Flexbox.

Backwards compatibility of flexbox - A guide by MDN that tells about the history of flexbox and how to write to code that is backwards compatible with the older versions of the browsers.

Flexbugs - A GitHub repository that contains lots of flexbox issues, particularly dealing with cross-browser compatibility problems.

Though the article has come to an end, the bugs are still alive. We have covered some of the common flexbox issues developers face and hope this will help you figure out solutions for your codebase.

Let us know in the comments if you find this blog post helpful and whether or not it has helped you solve your flexbox related issues.

Happy Coding!

Creating CSS Animations from Figma Prototypes

How to Approach Figma to Responsive CSS Conversion

How to Convert HTML/CSS to Figma? An Essential Guide For Designers

Converting Figma Designs to Tailwind CSS Utility Classes

A Complete guide on Figma Developer Handoff

View all posts

Legal Stuff

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexbox flex-column issue in Safari 10 #21903

cquillen2003 commented Feb 2, 2017

wonderment commented Feb 3, 2017 • edited

Sorry, something went wrong.

zavvla commented Feb 3, 2017

mdo commented Mar 26, 2017

• 👍 2 reactions

cr101 commented Mar 26, 2017

tavax commented Apr 12, 2017

Mdo commented apr 23, 2017.

sandhya-nuthakki commented Aug 13, 2018

No branches or pull requests

How to Fix Overflow Issues in CSS Flex Layouts

Want to read the how-to? Continue below!

—–

NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE INVESTING IN DIGITAL TRANSFORMATION & PRODUCT DEVELOPMENT IN 2024.

I recently ran into an odd overflow problem in Firefox, Safari and Edge. I had a simple flex column layout that needed to scroll on overflow. It looked great on Chrome of course, but wouldn’t overflow on other browsers. The content would just expand to its full height and blow out the layout.

The goal here was to create a list of content with a fixed header section above it. The list content was of an unknown length and would need to scroll. To make things a little more complicated, there was some additional content intertwined in the container divs and this entire component was destined to be used in several places.

“Easy,” I thought. I whipped up a quick flex-direction: column; container with a fixed div for the heading content and an overflow div container with its overflow content under that.

I tested in Chrome – looks great I tested in Firefox and Safari – looks great.

I cleaned up the code, submitted the PR, and marked my ticket Ready for QA. Done.

…until a week later when the bug ticket came in. Scrolling wasn’t working in Firefox. …What?

The Results

Under certain circumstances overflow needs a little extra love. It turns out that there was a feature in the flexbox specification that added an implied minimum size for flex items. This feature was removed and then re-added back into the spec at some point.

Lucky for us, the fix is an easy one. Simply add min-height: 0; to the flex child that has our overflow container.

Boom! Done.

Check out the code on CodePen .

It’s a super simple fix to an oddball edge case that took me a number of hours to find a solution for. Hopefully this saves you a bunch of time and hair pulling.

Play around with the CodePen , change things and make the knowledge your own. As always, if you have any comments or ideas to share, please leave them below or look me up on Twitter !

Timothy Eagan

Related posts.

As consultants, one of the first things we analyze when engaging with a new client…

In 3-ish Easy Steps Our goal is to draw a simple equilateral triangle. Before we…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

Display:flex and flex-wrap:wrap breaking layout in safari only

Hi, I have an issue with a website where this page https://amandaswellbeingpodcast.com/books/ was broken due to theme developers incorrect application of display: flex to how the theme works on this particular page.

If title was more than one line long for each books post it would only show one book underneath that row instead of two like it is supposed to.

I fixed this issue for all browsers except for safari, this fix I have applied breaks the footer layout and sidebar layout sitewide so I have quarntined the CSS to the books page only

Can anyone tell me what safari spefic code I need to add to fix this?

I have added display: -webkit-flex; /* Safari / -webkit-flex-wrap: wrap; / Safari 6.1+ */ to the CSS rules and it is still broken in Safari

Full css code for .row element is below

It’s the before and after pseudo elements that are adding to the width in Safari and making the 50% item only big enough for one item per row.

The pseudo elements are only needed for containing floated elements so removing them when you use flex should sort the problem.

(I’d be careful with the old flex prefixes also as some can have odd behaviours.)

Thanks Paul, I assume by old flex prefixes you meant the safari specific ones?

The issues with layout and flexbox appear sitewide when I unquarantine the code for the whole site.

I would like to fix this for the whole site if I can so I dont have to worry about applying a whole bunch of page-id specific code for each page.

I have tried to do this by removing the page-id class from the code you have given me but I must have gone about this the wrong way.

If you go to this url you can see in other pages how flexbox is breaking in safari https://amandaswellbeingpodcast.com

Other pages badly affected are the books page previously mentioned, and the videos page, videos page only looks okay because post titles have been limited to no more than one line long.

This is my code now, still not sure what I am doing wrong? footer and sidebar are also affected by this which I failed to mention before.

I’m not sure its a good idea to change those classes globally as the page is built on bootstrap3 which is a floated layout (bootstrap4 uses flexbox).

It depends on what original problem you were trying to solve by introducing flex so it seems a bit drastic to suddenly change the whole of bootstrap3 to use flex instead of floats as that may introduce more bugs than it solves. It may be that you could have solved the original problem in some other way without converting to flex but I don’t know what problem you originally tried to solve?

I didn’t see that code in your CSS so can’t comment but guess there are some specificity issues.

You may want to try:

Or to test if this really is a specificity issue add !important for testing.

If that addresses the problem then remove the !important and add more specificity with a longer chain of selectors (devtools is your friend here to see which rules win out).

Of course it may be that on some pages/sections you don’t have .posts and .row so you would need to find the correct classes to target the elements.

Thanks so much for your help and advice Paul, I will try to be a little clearer about what I am trying to rectify.

Tried the above code and it has sort of fixed the books and videos, but the sidebar and footer columns are still broken in Safari. You can see the broken sidebar has floated left instead of right and is now at the very bottom of the homepage instead of the top right. The broken footer columns can be seen down the very bottom of all pages, if you look at the home page in any other browser except safari you can see how the homepage and footer columns on all pages is supposed to look like.

The issue I am trying to solve is with the books and videos page.

The developer of this theme has a css bug where posts excerpts that have h2 titles that are more than one line long no longer float correctly due to increased height when compared to adjacent excerpt that would only have a h2 title one line long. This would cause only one excerpt to show underneath the above posts instead of the 2 that are supposed to be there.

This issue was fixed by introducing extra flexbox css in all browsers except for Safari. In safari the layout is broken even more, sidebar on home page no longer floats right and now floats left, footer row of columns now stack 2 columns across instead of 4 columns in a single row.

I think the original problem is simply that you didn’t account for floats snagging when content is an uneven height. Bootstrap3 has provisions for that and you would have needed to follow the correct format when creating the page. See the responsive columns reset section here for more info. Of course that means adapting all the html in the relevant places and is something that should have been done during construction.

Flex solves the problem but will of course create other problems because bootstrap3 wasn’t designed with flex in mind.

It may be that you can get away with limiting the flexbox approach to .posts only and avoiding negating the things that the floated approach needs. I would try something like this first and then see what you can manage from there.

Note the use of the child selector to limit the scope of the rules.

Thanks Paul.

Gave that code a shot, it fixed the footer and sidebar but broke flexbox for the posts again.

With a minor modification to your suggested code of removing the > for display flex it is now finally perfect in Safari. Below is the minor modification in case it helps some one else.

Thanks again for your help, Paul, and so sorry for taking so long to see your reply.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

CSS Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with flex , as well as display: flex , display: inline-flex , align-content , align-items , align-self , justify-content and order .

• 4 - 20 : Partial support
• 21 - 28 : Supported
• 29 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 123 : Supported
• 3.1 - 6 : Partial support
• 6.1 - 8 : Supported
• 9 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 21 : Partial support
• 22 - 27 : Partial support
• 28 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 12 : Not supported
• 12.1 : Supported
• 15 - 16 : Supported
• 17 - 108 : Supported
• 109 : Supported
• 5.5 - 9 : Not supported
• 10 : Partial support
• 11 : Partial support

Chrome for Android

Safari on ios.

• 3.2 - 6.1 : Partial support
• 7 - 8.4 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Supported

Opera Mobile

• 10 - 12 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.3 : Partial support
• 4.4 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Most partial support refers to supporting an older version of the specification or an older syntax .

The curious case of flexbox gap and Safari

• 28 Apr 2021

Update at the end

The gap property was first introduced to add inner grid spacing but was extended in the spec to work with flexbox. With one line of code, you can replace something like this:

That’s nice, but Safari doesn’t support gap in flexbox just yet. Normally I’d just reach for @supports :

Unfortunately, Safari already supports gap in grid , so this doesn’t work. This is one of those weird cases where there is no easy CSS-only solution, though there have been proposals for workarounds .

This has left me scratching my head. You could polyfill with JavaScript or use PostCSS , but at this point, is it worth it? That’s a question that all frontend developers have to weigh from time to time, and there’s no one-size-fits-all answer.

I will probably wait until Safari supports flexbox gap in the latest two versions before using it, mainly because it doesn’t take that much more CSS to achieve the same effect. The only drawback is I cannot change the margins of the flex container. This can be overcome with an extra wrapper element, but then you’re starting to complicate the markup.

If you want to read more about the flexbox gap issue, check out this post from Ahmad Shadeed . And if you found this post helpful, please like it on Dev Community and let me know on Twitter .

Until tomorrow!

As of Safari 14.1, flex gap is now supported ! This brings me one step closer to replacing my object styles that do the same thing. I typically wait until something is supported in the last two versions of the evergreen browsers (or can be worked around).

I would still love to have a way to use @supports , but I’ll take what I can get. Anyway, happy coding!

Safari 14.1 Adds Support for Flexbox Gaps

Yay, it’s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We’ve had grid-gap support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap in either type of layout:

Apple’s been rather quiet about the update. I didn’t even hear about it until Eric Meyer brought it up in an email, and he only heard about it when Jen Simmons tweeted it out.

Did you see, Safari 14.1 shipped yesterday… including support for Gaps in Flexbox. (*Can I Use & MDN still need to be updated, so they don't show support yet… but it's there! Try it out.) — Jen Simmons (@jensimmons) April 27, 2021

I checked the WebKit CSS Feature Status and, sure enough, it’s supported . It just wasn’t called out in the release notes. Nothing is posted to Safari’s release notes archive just yet, so maybe we’ll hear about it officially there at some point. For now, it seems that Maximiliano Firtman ‘s overview of iOS 14.5 is the deepest look at what’s new .

And how timely is it that Eric recently covered how to use the gap property , not only in grid and flexbox layouts, but multi-column as well.

Apple has pulled Safari 14.1 update for Mojave and Catalina: https://eclecticlight.co/2021/04/30/apple-has-pulled-safari-14-1-update-for-mojave-and-catalina/

Oh geez! Thanks for the heads up.

It’s such a practical feature. But what about horizontal-gap and vertical-gap, was not it better? In the other hand second parameter?

Grid still supports that I think? No? Flexbox is just one-directional so I guess it makes sense that it doesn’t, although I could imagine a world where that second param is the spacing between rows when flexbox wraps.

About flippin’ time. They also introduced support for <input type="date/time/datetime"> , I believe. Perhaps they’re keeping it quiet because they’re embarrassed at how long it’s taken them.

Safari is the new IE.

I’m starting to see why it was probably pretty vital for Jen Simmons to jump ship from Mozilla to Safari, but if she’s whipping it into shape at Apple, I’m all for it.

Here are the release notes: https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

One thing which is missing there is correct support of scroll-margin and scroll-padding – the end of negative-margin + positive-padding hack for scrolling to anchor when having fixed navbar.

Frekin’ FINALLY!!!

Ok, that’s a good news, but i think we’re not going to use this for… at least two years, because of retrocompatibility?

Happy and sad at the same time.

I am so waiting for Lazy Load. Now it’s natively everywhere, but not yet in Safari.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Flexbox is the commonly-used name for the CSS Flexible Box Layout Module , a layout model for displaying items in a single dimension — as a row or as a column.

In the specification, Flexbox is described as a layout model for user interface design. The key feature of Flexbox is the fact that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.

Flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items.

Property reference

• align-content
• align-items
• flex-direction
• flex-shrink
• justify-content

Further reading

• CSS Flexible Box Layout Module Level 1 Specification
• Basic Concepts of Flexbox
• Relationship of flexbox to other layout methods
• Aligning items in a flex container
• Ordering flex items
• Controlling Ratios of flex items along the main axis
• Mastering wrapping of flex items
• Typical use cases of flexbox