Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing flex-grow, flex-shrink, flex-basis webkit autoprefix

See original GitHub issue

I’ve been testing this code in autoprefixer.github.io and I miss the translation for -webkit.

// source code 
.example {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 10%;
}

// autoprefixed code
.example {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    -ms-flex-negative: 2;
        flex-shrink: 2;
    -ms-flex-preferred-size: 10%;
        flex-basis: 10%;
}

Do you have any idea on why the -webkit autoprefix is missing? Thanks a lot

Issue Analytics

State:
Created 7 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

aicommented, Jun 26, 2016

Maybe this case is related? https://github.com/postcss/autoprefixer#no-prefixes-in-production

Try to use browserslist config

0reactions

andreareginatocommented, Jun 26, 2016

browserlist solves the problem. Thanks @ai for your time and help.

Top Results From Across the Web

flex-grow not sizing flex items as expected - Stack Overflow

Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size...

Backwards compatibility of flexbox - CSS - MDN Web Docs

Flexbox is very well supported across modern browsers, however there are a few issues that you might run into. In this guide we...

Understanding flex-grow, flex-shrink, and flex-basis - CSS-Tricks

When you apply a CSS property to an element, there's lots of things going on under the hood. For example, let's say we...

j2c-plugin-prefix-browser - npm

Unlike Autoprefixer and the inline-style-prefixer, it relies on feature ... flex-grow => ? flex-shrink => ? flex-wrap => -x-box-lines ...

Unraveling Flexbox.pdf

flex-shrink and flex-basis properties to build twelve- ... The flex-grow property tells flexbox how to grow the item ... -webkit-box-orient: vertical;.