Bulma: is-grouped inputs goes off-screen

[JorgenSolli]

• [x] This is about the Bulma CSS framework
• [x] I'm using Bulma version [0.2.1]
• [x] My browser is: Chrome latest version

Hey. I'm having some issues with inputs inside "is-grouped" with "is-expanded". If they exceed the width of the screen, instead of stacking on top of each other it goes off-screen. lik THIS

I currently have two inputs and both have "is-expanded" so each takes up equal space. How do I make them go from inline to stack like a column at a curtain breakpoint?

Steps to Reproduce

1. <div class="control is-grouped"> <p class="control is-expanded"> <input class="input input-newstyle" type="text" placeholder=""> </p> <p class="control is-expanded"> <input class="input input-newstyle" type="text" placeholder=""> </p> </div>
2. Go on mobile device
3. Be frustrated
   

   Expected behavior

I either expected the inputs to shrink to the screen size or to stack on top.

Actual behavior

Inputs goes off-screen.

Hopefully I'm not missing something stupid and wasted your time.
And hopefully there is also an easy solution that I'm just not smart enough to figure out by myself :p

[jgthms]

No you're right.

The thing is, I don't want is-grouped to also be working on mobile, but I should only enable it from tablet onwards.

[thijsvdanker]

As a fix or a workaround: adding this to my own styles works for me:

.control.is-grouped {
    +mobile {
        flex-direction: column;
    }
}

[jgthms]

The min-width has been removed.

[posidonius]

I'm experiencing this issue as well. What was the solution?

[bentedder]

I found the solution was using field is-grouped is-grouped-multiline

[codeofsumit]

The problem seems to be flex-shrink. Removing min-width isn't enough 🤔
I find that my inputs are way bigger than they have to be causing overflow (or linebreak when using is-grouped-multiline) even though it's not necessary.