Bug: Column within Column interaction

[azuryte5]

Summary

Count -1 and count 2 have a bug when used with other columns inside.

default count 3 works fine, yet if you want the first column to take up the whole row count-1 works find on wider screen but it does not collapse accordingly.

Column Count-1 should have interior columns colapse to available width and not break out.

Expected behaviour in 2nd image.

[NickDJM]

Adding to this with the testing I did.

I have the following markup:

<div class="container">
  <div class="columns count-1">
    <div class="columns count-3">
      <button class="button">Default Button</button>
      <button class="button primary">Primary Button</button>
      <button class="button secondary">Secondary Button</button>
    </div>
    <div class="columns count-4">
      <button class="button tertiary">Tertiary Button</button>
      <button class="button" disabled>Default Button</button>
      <button class="button primary" disabled>Primary Button</button>
      <button class="button secondary" disabled>Secondary Button</button>
      <button class="button tertiary" disabled>Tertiary Button</button>
    </div>
  </div>
</div>

The columns don't seem to reduce in size correctly when they're inside of each other. It appears to only be an issue when we're dealing with 1/2 columns at the root, but that might just be a result of screen size limits.

[NickDJM]

Because of the way the minimum column width is defined, columns within columns will not work as expected unless we start using JS to figure out the widths. This isn't something I want to do.

The only other solution would be us make sure columns are always using fraction units (fr) instead of min/max widths.

If you get super custom with the min/max values then you're fine, but out-of-the-box this is not going to be supported.

I have implemented a new .flex-columns class which behaves more similarly to Bootstrap columns using flex instead of grid. They still differ from bootstrap because we're using gap, but if you need a more controllable option, that would be it.