Uikit: Child Width Expand not working together with higher breakpoints sizes.

[zzseba78]

UIkit version

3.0.0-beta.30

Browser

Reproduction Link

https://codepen.io/zzseba78/pen/yoEBXm

Steps to reproduce

Resize the width on the browser.

What is Expected?

Items should be expand by default and 1/3 on medium and behond.

What is actually happening?

The class after expand doesn´t take effect.

Note: this happens in all the Width component, not only on child-width.

[aarongerig]

https://codepen.io/aarongerig/pen/RZebpr

This pen might help with this issue. So basically we have to set flex-basis: auto on every element with expand behaviour. Additionally all elements with a fixed width also need to have a max-width.

Tested on Chrome 60, Firefox 55, Safari 10.1 _(Attention: has to be tested on Safari < v10.1, since this got fixed with that version.)_, Opera 47.

[saschadube]

So, you want to have only 3 items per row for medium and larger viewports and all items in one row for smaller viewports.

For example, if you have 6 items, they are nicely aligned into two rows and on smaller viewports they are squeezed into one row.

I'm I getting this right? Why would you want that?

[zzseba78]

@saschadube Thanks for your response.
I get your point, and the example it´s just to show the issue, it´s not a real use case.
The real use case it´s any situation that you want to use uk-width-expand ( in conjunction with uk-width-auto for example ) by default , and in larger breaking points you want to be able to control the width.