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().