文本无限水平列布局问题：浏览器无法正确识别父元素宽度

问题核心是CSS多列布局在固定高度下，浏览器默认会基于视口宽度分栏，导致容器无法自动计算所有列的总宽度。以下是可行的解决方案：

修改方案 #

1. 给外层容器.outer-wrapper添加display: inline-block，让它根据子元素实际宽度自适应，而非占满视口
2. 调整.fixed的滚动属性，仅允许横向滚动，禁止垂直滚动
3. 保留.wrapper的width: max-content，确保它能包裹所有列的总宽度

修改后的完整代码 #

HTML（无需改动）

<html>
    <body>
        <div class="fixed">
            <div class="outer-wrapper">
                <div class="wrapper">
                    <div class="columns">
                        <p>Private Sale Drop
                          is scheduled from the 28th of April until May 1st. Preferential Sale Drop is scheduled from the 2nd of May
                          until May 15th. Final Private Sale Drop is scheduled from the 16th of May until the 18th of May. Remaining
                          artworks will be available for sale until June 30th at an increased price.
                          The Venetian-born artist Giovanni Battista Piranesi (1720-1778) is best known for his dramatic prints of the
                          architecture and antiquities of his adopted city of Rome, and for the extraordinary flights of spatial fancy
                          in his celebrated series La Carceri (Prisons).
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

body {
    font-size: 20px;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: lavender;
    overflow-x: auto; /* 仅横向滚动 */
    overflow-y: hidden; /* 禁止垂直滚动 */
}

.outer-wrapper {
    display: inline-block; /* 关键：让容器自适应子元素宽度 */
}

.wrapper {
    width: max-content;
    height: 200px;
    border: 4px solid red;
    background: lightblue;
}

.columns {
    column-fill: auto;
    column-width: 350px;
    column-gap: 90px;
    height: 100%;
}

原理说明 #

• display: inline-block打破了块级元素默认占满父容器宽度的特性，让.outer-wrapper收缩到子元素的实际宽度，这样.wrapper的max-content才能正确计算所有文本列的总宽度（每列宽度×列数 + 列间隙×(列数-1)）
• 调整overflow属性严格控制滚动方向，符合"无垂直滚动"的需求
• 无需硬编码超大宽度，布局会根据文本内容自动适配列数和总宽度

内容的提问来源于stack exchange，提问作者Evgeniy Tyurin