这个需求非常贴合实际场景，默认的Textual TabbedContent组件的标签栏是横向滚动模式，所以你之前针对容器max-width的调整没命中关键的样式控制点。咱们可以通过修改Tabs组件的布局属性，打破默认的滚动限制，实现标签自动换行，同时保证DataTable的横向滚动不受影响，具体方案如下：

关键原理说明 #

默认的Textual标签栏（Tabs组件）使用了横向滚动容器，要让标签换行，需要：

1. 给Tabs设置flex-wrap: wrap，开启自动换行的flex布局
2. 解除#tabs-scroll容器的滚动限制（默认是overflow-x: auto），让换行后的标签能正常显示
3. 确保Tab内容区域不被宽度限制，保留DataTable的横向滚动能力

完整可运行代码 #

from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, TabPane, DataTable

class TooManyTabsApp(App):
    CSS = """
    TabbedContent {
        width: 100%;
        height: 100%;
    }

    /* 核心：让标签列表自动换行 */
    ContentTabs Tabs {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    /* 解除滚动容器的限制，让换行的标签可见 */
    #tabs-scroll {
        overflow: visible;
        width: 100%;
    }

    /* 保证Tab内容区域支持横向滚动，不限制DataTable宽度 */
    TabPane {
        height: 100%;
        overflow-x: auto;
    }

    DataTable {
        height: 100%;
    }
    """

    def compose(self) -> ComposeResult:
        columns = [f"Loooooong column {i}" for i in range(10)]

        with TabbedContent():
            for i in range(10):
                with TabPane(f"Loooooong Tab {i}"):
                    dt = DataTable()
                    dt.add_columns(*columns)
                    yield dt

def main():
    app = TooManyTabsApp()
    app.run()

if __name__ == "__main__":
    main()

效果说明 #

运行这段代码后，你会看到：

• 长标签会自动换行，占满当前屏幕宽度，不会再超出屏幕边缘
• 每个Tab中的DataTable依然可以通过横向滚动查看所有长列，完全满足你提到的约束条件

为什么之前的尝试没生效？ #

你之前指定的CSS_TARGETS里的组件大多是容器外层，但核心的Tabs组件默认的flex-wrap是nowrap，而且#tabs-scroll的滚动限制会隐藏换行后的内容，所以只调整max-width无法改变默认的滚动布局逻辑，必须修改这两个关键样式点才能实现换行。

备注：内容来源于stack exchange，提问作者Tim