父元素寬度為flex-1 的情況下，如何將子元素橫向滾動

ifnk發表於2024-05-21
Flex
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>
}

補充，如果是 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>

效果

相關文章