Removing .container fixed width values makes column size depend on content

[airblade]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.8.2.
My browser is: Safari, Chrome, Firefox

Description

I just upgraded from 0.7.2 to 0.8.2 and my single-column layouts have gone wrong.

On my login page I want the form to be horizontally centered, and take up half the width of the page.

.container
  .columns.is-centered
    .column.is-half
      [login form]

This worked well with 0.7.2. However after 0.7.5 and #2297, a column with a size modifier no longer has a predictable width.

If the login form has some text blurb which is "long", the form behaves as expected.

But if the login form doesn't have any wide child elements, the form shrinks to the width of the input fields which is far less than half the width of the container. It looks weird.

This seems to be because the desktop container used to have a fixed width of 960px but now its width is auto.

In the screenshots the container has a blue outline; and the .columns div has a green outline; and the .column has an orange outline.

Expected behavior

The container should be the width of the screen.

Actual behavior

The container shrinks its width, causing my .is-half column, when not containing any long text, to shrink to half the width the container chose.

[RasdanJames]

Here's how I did something similar (if I understand your question):

<div class="columns is-desktop is-centered">
    <div class="column is-half">
    </div>
</div>

[airblade]

@RasdanJames That works, but then there's no max-width.

As I understand it, a container used to have a fixed width (for any given breakpoint). Now a container has a max width but its actual width depends on what's in the container – which to my mind makes it much more of a fluid layout than a fixed one.

According to the docs the only difference between an ordinary container and a fluid one is that the former has a max width. I expected a non-fluid container to have a fixed width.

I can solve my problem by setting the width of my container to 100%. I wonder though whether this is the (new) intended behaviour?

[airblade]

Maybe we need an is-fullwidth modifier for container?

[RasdanJames]

That's what I did for those times when I need it. I created is-full-width globally for any tag. It already exists but it's not universal, so that made it universal.

[dwarfmondo]

This bit me in the ass today. I upgraded from 0.7.4 to 0.7.5 and tons of our layouts broke. Super frustrating. @jgthms What was your reasoning for removing the width? And can you give us guidance on a fix?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[airblade]

Would it be possible to add an .is-fullwidth class to .container please? A number of other things have this: tabs, tables, form inputs, buttons, images.