React Tailwind CSS溢出无法正常工作

问题描述

我在React中使用Tailwind CSS遇到问题，其中组件溢出行为异常，并且第一项不在屏幕上。在大屏幕上看起来很正常，但是一旦它进入md断点或更小的断点，它就会开始出现异常。您可以检查gif：

我的问题的GIF：

我希望第一张卡片在屏幕内呈现，由于某种原因，它被从屏幕的左侧推出，而没有明确定义这样做。在div中呈现的第一张卡片在可滚动div内宽度的左侧推出。

问题出在ForecastCards.js组件上：

    return (
        <div className='flex justify-evenly justify-center items-center py-3 overflow-scroll'>
            {parsed.map(({ day,main,weather }) => (
                <div
                    key={day}
                    className={`sm:px-3 md:px-6 md:py-3 lg:px-10 lg:py-6 cursor-pointer border-2 ${
                        selectedDay === day
                            ? 'border-blue-400 bg-yellow-100'
                            : 'border-white'
                    }`}
                    onClick={() => setSelectedDay(day)}>
                    <div className='text-center px-1 md:p-0'>
                        ...
                    </div>
                </div>
            ))}
        </div>
    );

App.js

return (
    <div className='container mx-auto md:px-12 lg:px-16 xl:px-20'>
        ...
        <div>
            <ForecastCards
                data={weatherData}
                selectedDay={selectedDay}
                setSelectedDay={setSelectedDay}
            />
        </div>
        ...
    </div>
)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）