html - 顺风文本没有在反应中溢出

Question

我的 React/tailwind 应用程序中的文本没有溢出时遇到问题。我希望文本可以在移动设备上水平滚动，但我的文本似乎被包含在内，如果我让屏幕变小，容器会不断调整大小而不是溢出。在任何其他应用程序中，这将是天赐之物，但我需要它溢出，以便我可以滚动它，就像您在移动设备上查看本网站上的链接一样......

https://www.glossier.com/

lossier.com 水平滚动示例

目前我的代码看起来像这样。正如您所看到的，文本通过彼此堆叠而不是每个字母并排放置，从而适合其各自 div 内的大小。

我的应用示例

这是我的组件的代码：

import React from 'react';
import { Link } from 'react-router-dom';

const Scrolllinks = () => {
    return (
        <div className="flex flex-row w-full overflow-x-scroll uppercase">
                <Link className="box-border">Hydra Boost Daily Lenses</Link>
                <Link className="box-border">Blue Light Glasses</Link>
                <Link className="box-border">Hydration Drops</Link>
        </div>
    )
}

export default Scrolllinks;

Answer 1

你可以按住 Shift + Scroll 它会工作

Answer 2

父元素只需要flex和overflow-x-scroll。在您的情况下，所有孩子<Link>都需要flex-shrink-0，这将阻止他们包装。