Semantic-ui-react: Bug: Grid doesn't resize properly when window resizes

[keeslinp]

Steps

1. Create a grid with a row and column floated right.
2. Resize the window horizontally
   

   Expected

When the window resizes the column floated to the right should stay in the window view.

Result

The Right floated column gets cut off.

Here is what is looks like before the resize:

And here it is after the resize.

Testcase

http://codepen.io/anon/pen/LRQGpP?editors=0010

More info

I was able to use largeScreen and Width to make things a little better but it wasn't smooth (column cut off until it reached smaller size then jumped back in).

[jeffcarbs]

Hey @keeslinp thanks for the report! This project only handles generating valid SUI markup and this sounds like an issue with the CSS - the container width is handled by CSS media queries from SUI core.

That being said, I looked at your test case and I think your issue is that the button has a certain width, and at some screen size the width of the button is bigger than the width of the column, so it extends outside it. I resized to just before the button gets cut off and you can see the button starting to break outside of the column padding:

Also, floated='right' floats the column, not the content. You can see when the column is wider than the button, the button is aligned left within the column:

Hope this helps! Going to close this since it's not an issue with this project.

[levithomason]

You can also add celled to the Grid to see the column issue more clearly: http://codepen.io/levithomason/pen/ORQrQx

[keeslinp]

Thanks guys. I appreciate your help :).

EDIT: adding a min-width to the column did the trick. Not sure if that's the proper way or not but it worked. Thanks again.