父元素宽度为flex-1 的情况下,如何将子元素横向滚动
function generateRandomString(length) {
let result = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
export const Test = () => {
return <div className='h-full overflow-hidden flex '>
<div className="flex-1 h-full overflow-auto">
<div>
<div className='flex items-center overflow-x-auto max-w-full'>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border shrink-0 border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
</div>
</div>
<span className="font-normal h-full whitespace-pre-line overflow-hidden"
style={{
wordWrap: 'break-word',
}}
>
{generateRandomString(5000)}
</span>
</div>
<div className="flex-1 h-full overflow-auto bg-red-100">
</div>
</div>
}
这里记得父组件给 max-w-full
样式
,max-w-full 是一个 Tailwind CSS 类,它设置了元素的最大宽度为其父元素的宽度。这意味着元素的宽度不会超过其父元素的宽度。 在你的代码中,max-w-full 被应用到了一个包含多个子元素的 div 上。这个 div 使用了 flex 布局,并且设置了 overflow-x-auto���这意味着如果子元素的总宽度超过了父元素的宽度,那么可以通过水平滚动来查看超出的部分。 因此,max-w-full 在这里的作用是限制这个 div 的宽度不超过其父元素,以确保布局的正确性,并且当子元素的宽度超过父元素宽度时,可以通过滚动来查看所有的子元素。
补充,如果是 grid布局 ,这定了6列,然后每个宽度*6 早就超过了 父元素的一半网页宽度 ,我想要按照每个元素宽度来,然后超出横向滚动 ,目前实际的效果是 每个子元素宽度都被均分了,根本就没有200px
解决方法就是 在CSS Grid布局中,如果你想要让每个子元素的宽度固定,并且在超出容器宽度时显示滚动条,你可以使用minmax函数来设置grid-template-columns的值。minmax函数可以设置每个网格轨道的最小宽度和最大宽度。 在你的例子中,你可以将grid-template-columns的值设置为repeat(6, minmax(200px, 1fr))。这样,每个网格轨道的最小宽度为200px,最大宽度为可用空间的等份。
<div className='grid grid-cols-6 gap-1 overflow-x-auto' style={{ gridTemplateColumns: `repeat(6, minmax(200px, 1fr))` }}>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
<div className="border border-solid border-gray-100 w-[200px] h-20 bg-blue-200"></div>
</div>
效果