MButton Flex Layout is Broken In Firefox and Safari

[Josh Tate]

Bug description

When trying to use an MButton inside a flex layout, it will behave as if it was much smaller than it actually is, which can cause layout issues (as seen below).

Chrome Example (not broken):

Firefox Example (broken):

Safari Example (broken):

Reproduction

https://codesandbox.io/s/m-button-flex-weirdness-3tyjgd?file=/src/App.vue

Environment

System:
    OS: macOS 12.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 91.40 MB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
  npmPackages:
    @square/maker: ^6.7.1 => 6.7.1 
    vue: ^2.6.14 => 2.6.14 
    webpack: ^5.1.3 => 5.1.3 

Addressed by

No response

Can you contribute a fix?

• I’m interested in opening a pull request for this issue.

[kirill]

It's probably rendering inconsistently between browsers because you made some unusual CSS choices. I don't understand why you're trying to size flex children using width and min-content here:

.input {
    width: 100%;
}

.button {
    min-width: min-content;
}

I changed those classes to use the flex property, which is what I think you should be using to size flex children, to this:

.input {
    width: 0;
    flex: 1 0 auto;
}

.button {
    flex: 0 0 auto;
}

And it now renders consistently between browsers:

In this particular context:

• flex: 0 0 auto; means "Don't grow or shrink this child, let it determine its own size".
• width: 0; flex: 1 0 auto; means "Grow this child to accommodate all available remaining space not already taken by other children".

Anyway, does this fix your problem? Can you simply adjust the CSS in your application code?

[kirill]

Josh confirmed with me on Slack that this fixes his issue, closing this