Grid not resizing on browser resize

[onlineandy]

Vaadin 8 and resposive layout 2.1.1

We are using ResponsiveLayout with a grid inside which should be 100% width. I have attached an example which does not work as expected (layout2 on browserresize). When I uncomment the lines with "100%", it works. But I think there should be a better solution to this? Am I missing something?

public class MyUI2 extends UI {

    public class Bean {
        private String col1 = "1";
        private String col2 = "2";
        private String col3 = "3";
        public String getCol1() {
            return col1;
        }
        public void setCol1(String col1) {
            this.col1 = col1;
        }
        public String getCol2() {
            return col2;
        }
        public void setCol2(String col2) {
            this.col2 = col2;
        }
        public String getCol3() {
            return col3;
        }
        public void setCol3(String col3) {
            this.col3 = col3;
        }

    }

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout vl = new VerticalLayout();
        vl.setSpacing(true);

        CssLayout layout = new CssLayout();
        layout.setWidth("100%");
        Grid<Bean> g = new Grid<>(Bean.class);
        g.setItems(new Bean(), new Bean());
        g.setWidth("100%");
        g.setHeightMode(HeightMode.ROW);
        layout.addComponent(g);

        ResponsiveLayout layout2 = new ResponsiveLayout();
        layout2.setSpacing();
        ResponsiveRow row = layout2.withFullSize().addRow();
        ResponsiveColumn col = row.addColumn().withDisplayRules(12, 12, 12, 12);
        //row.setWidth("100%");
        //col.setWidth("100%");
        //col.getRoot().setWidth("100%");
        row.addStyleName("my-row");
        col.addStyleName("my-col");
        Grid<Bean> g2 = new Grid<>(Bean.class);
        g2.setItems(new Bean(), new Bean());
        g2.setWidth("100%");
        g2.setHeightMode(HeightMode.ROW);
        col.withComponent(g2);

        vl.addComponent(layout);
        vl.addComponent(layout2);
        setContent(vl);
    }

    @WebServlet(urlPatterns = "/ui2/*", name = "MyUIServlet2", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI2.class, productionMode = false)
    public static class MyUIServlet2 extends VaadinServlet {
    }

}

The grid resizes to 100% if a column is clicked (server event).

[onlineandy]

The problem with the fix (setting to 100%) is, that then all margins breaks. So, this is not really an option. :(

[onlineandy]

As a workaround we do JavaScript.eval("window.addEventListener('resize', vaadin.forceLayout);"); in UI.init().