如何让Vaadin Grid适配屏幕？列宽总和不足却仍被截断

针对你遇到的列宽总和不足100%但最后一列被截断的问题，这确实和Vaadin Grid默认的列内边距、flex布局特性有关，以下是几个可行的解决办法：

方法一：用Flex Grow替代固定百分比分配空间 #

放弃为所有列设置固定百分比宽度，改用setFlexGrow()基于权重分配剩余空间，让Grid自动适配容器宽度：

private void createBooksTable() {
    this.booksTable = new Grid<>();
    this.booksTable.setWidth("100%");
    this.yearRenderer = new ActionYearRenderer();
    
    // 用flexGrow控制列宽比例，固定小列可保留setWidth
    this.booksTable.addColumn(this.yearRenderer).setFlexGrow(1);
    this.booksTable.addColumn(new NewTagRenderer()).setFlexGrow(0).setWidth("40px");
    this.booksTable.addColumn(new AuthorListRenderer()).setFlexGrow(2);
    this.booksTable.addColumn(new TitleRenderer()).setFlexGrow(5); // 占比最大的列
    this.booksTable.addColumn(new RatingRenderer()).setFlexGrow(0).setWidth("50px");
    this.booksTable.addColumn(new ReaderRatingRenderer()).setFlexGrow(0).setWidth("40px");
    this.booksTable.addColumn(new StatusRenderer()).setFlexGrow(1);
    
    this.booksTable.setItemDetailsRenderer(new BookDetailsRenderer());
}

这种方式下，Grid会根据各列的flexGrow值自动分配可用空间，固定宽度的列保持尺寸，整体不会溢出容器。

方法二：减少列的默认内边距 #

Vaadin Grid的单元格默认有左右内边距（var(--lumo-space-s)，约8px），这会让列的实际占用宽度超过你设置的百分比。通过自定义CSS缩小内边距：

/* 全局调整所有Grid单元格内边距 */
vaadin-grid-cell-content {
  padding-left: var(--lumo-space-xs);
  padding-right: var(--lumo-space-xs);
}

/* 只针对你的booksTable调整 */
#booksTable vaadin-grid-cell-content {
  padding: 4px 6px; /* 自定义上下左右内边距 */
}

调整后，列的总占用宽度会减少，原本的百分比设置就能适配100%容器宽度。

方法三：强制内容换行避免撑宽列 #

如果某列（比如标题列）的内容过长，会强制撑开列宽导致Grid溢出，可设置内容自动换行：

// 在TitleRenderer的初始化代码中添加样式
public class TitleRenderer extends ComponentRenderer<Div, Book> {
    @Override
    public Div createComponent(Book book) {
        Div div = new Div(new Text(book.getTitle()));
        div.getStyle().set("white-space", "normal"); // 允许换行
        div.getStyle().set("line-height", "1.4");
        return div;
    }
}

或者通过CSS全局设置：

vaadin-grid-column:nth-child(4) vaadin-grid-cell-content {
  white-space: normal;
}

这样长内容会自动换行，不会强制撑宽列，保证Grid整体宽度不溢出。

内容的提问来源于stack exchange，提问作者Gary Greenberg