TextArea resize in grid column

Hi, I have a use case where I need to put some TextArea components inside of grid cells. The issue is that the resize does not work horizontally. Vertically, it all works fine, but horizontally the TextArea just overflows the cell and the content is hidden.

In a regular HTML table there is no such issue and the table expands to accommodate the text area:
https://codepen.io/kristapsstrals/pen/ExOXXvR

An example:

private Component getGridTest() {
    var data = new ArrayList<ArrayList<String>>(){{
        add(new ArrayList<>(){{
            add("11");
            add("12");
            add("13");
            add("14");
        }});
        add(new ArrayList<>(){{
            add("21");
            add("22");
            add("23");
            add("24");
        }});
        add(new ArrayList<>(){{
            add("31");
            add("32");
            add("33");
            add("34");
        }});
        add(new ArrayList<>(){{
            add("41");
            add("42");
            add("43");
            add("44");
        }});
    }};

    var grid = new Grid<ArrayList<String>>();
    grid.addColumn(new ComponentRenderer<>(p -> {
        var tx = new TextArea();
        tx.getStyle().set("overflow", "auto");
        tx.getStyle().set("resize", "both");
        tx.getStyle().set("border", "1px solid red");
        return tx;
    }));
    grid.addColumn(new ComponentRenderer<>(p -> {
        var tx = new TextArea();
        tx.getStyle().set("overflow", "auto");
        tx.getStyle().set("resize", "both");
        tx.getStyle().set("border", "1px solid red");
        return tx;
    }));
    grid.addColumn(new ComponentRenderer<>(p -> {
        var tx = new TextArea();
        tx.getStyle().set("overflow", "auto");
        tx.getStyle().set("resize", "both");
        tx.getStyle().set("border", "1px solid red");
        return tx;
    }));
    grid.addColumn(new ComponentRenderer<>(p -> {
        var tx = new TextArea();
        tx.getStyle().set("overflow", "auto");
        tx.getStyle().set("resize", "both");
        tx.getStyle().set("border", "1px solid red");
        return tx;
    }));

    grid.setItems(data);

    return grid;
}

html table vs vaadin grid
image.png
image.png

The grid is not designed for this. You either go with the edit mode of the grid where you probably have more luck, create a proper design instead of abusing the grid or use https://github.com/TatuLund/bean-table