12 columns system not taking full length of container

[idybil]

This is about the Bulma CSS framework
I'm using Bulma [1.0.0]
My browser is: any

Overview of the problem

The 12 columns system of version 1.0.0 is not taking the full length of its container like it is in version 0.9.4.

Description

When using column with is-* and the total of the is-* is 12, the columns container does not take 100% of its parent.

In version 0.9.4, the result look like this: (the red line is the end of the parent container)

In version 1.0.0, the result look like this: (the red line is the end of the parent container)

In the screenshots above, we can notice that the width in version 1.0.0 is using a calculation which is not preset in version 0.9.4.

Expected behavior

Is this a bug in version 1.0.0, or it is intended to be this way ? Is it possible that the version 1.0.0 have the same behavior as version 0.9.4 ?

Thanks

[smileys53]

Facing the same issue, did you find a solution?

[idybil]

@smileys53, No for now I leave it that way expecting a fix in a future version.

[SebConejo]

@idybil I have the same problem. It's quite annoying. I've done some research and this is the trace I'm following:

• If you remove is-3 on your column div, then it works fine. The total width is occupied.
• So I think the problem is linked to the width attached to a column. I see that the .is-3 class has the following width: calc(25% - var(--bulma-column-gap) / 2). If we replace it with width: 25%, then everything works fine.

It's a bit of a big mistake, and I'm a bit surprised. I'll keep investigating. @jgthms what do you think? do you have any other solutions ?

Here are screenshots of the issue.