Kevin Powell - Community•8mo ago

Can't horizontal scroll

Hello guys i have a simple react component, the problem is the "tags" div doesnt go into horizontal overflow it just sticks to the parent's width, i tried so many things but couldnt make it

"use client";
import { timePassed } from "@/utils";
import Link from "next/link";
import { PencilIcon, ClockIcon } from "./Icons";
import { useEffect, useState } from "react";
import { Blog } from "@prisma/client";

interface BlogCardProps {
    blog: Blog;
}

export default function BlogCard({ blog }: BlogCardProps) {
    const [timeStamp, setTimeStamp] = useState(timePassed(blog.createdAt));

    useEffect(() => {
        setTimeStamp(timePassed(blog.createdAt));
    }, [blog.createdAt]);

    return (
        <Link href={"blogs/" + blog.id} className="border-b-2 p-3 md:rounded-xl md:border-2 gap-2 md:gap-3 flex flex-col first:border-t-2 hover:shadow-[0_0_10px_#ffffff] transition-shadow duration-300">
            <div className="text-xl md:text-2xl leading-7 md:leading-normal">
                {blog.title}
            </div>
            <div className="whitespace-pre-wrap text-lg md:text-xl leading-6 md:leading-normal">
                {blog.description}
            </div>
            <div className="flex justify-between">
                <div className="flex items-center">
                    <PencilIcon className="size-5 mr-1" />
                    <div>
                        {blog.author}
                    </div>
                </div>
                <div className="flex items-center">
                    <ClockIcon className="size-5 mr-1" />
                    {timeStamp ?? timePassed(blog.createdAt)}
                </div>
            </div>
            {blog.tags?.length && <div className="flex gap-3">
                {blog.tags.map((tag, index) => (
                    <div key={index} className="p-1 text-sm md:text-base rounded-xl">
                        {tag}
                    </div>
                ))}
            </div>}
        </Link>
    );
}

"use client";
import { timePassed } from "@/utils";
import Link from "next/link";
import { PencilIcon, ClockIcon } from "./Icons";
import { useEffect, useState } from "react";
import { Blog } from "@prisma/client";

interface BlogCardProps {
    blog: Blog;
}

export default function BlogCard({ blog }: BlogCardProps) {
    const [timeStamp, setTimeStamp] = useState(timePassed(blog.createdAt));

    useEffect(() => {
        setTimeStamp(timePassed(blog.createdAt));
    }, [blog.createdAt]);

    return (
        <Link href={"blogs/" + blog.id} className="border-b-2 p-3 md:rounded-xl md:border-2 gap-2 md:gap-3 flex flex-col first:border-t-2 hover:shadow-[0_0_10px_#ffffff] transition-shadow duration-300">
            <div className="text-xl md:text-2xl leading-7 md:leading-normal">
                {blog.title}
            </div>
            <div className="whitespace-pre-wrap text-lg md:text-xl leading-6 md:leading-normal">
                {blog.description}
            </div>
            <div className="flex justify-between">
                <div className="flex items-center">
                    <PencilIcon className="size-5 mr-1" />
                    <div>
                        {blog.author}
                    </div>
                </div>
                <div className="flex items-center">
                    <ClockIcon className="size-5 mr-1" />
                    {timeStamp ?? timePassed(blog.createdAt)}
                </div>
            </div>
            {blog.tags?.length && <div className="flex gap-3">
                {blog.tags.map((tag, index) => (
                    <div key={index} className="p-1 text-sm md:text-base rounded-xl">
                        {tag}
                    </div>
                ))}
            </div>}
        </Link>
    );
}

3 Replies

MarkBoots•8mo ago

flex will always try to fit the items inside of the container. maybe overflow-auto will work in this case. otherwise, could you copy the rendered html to a tailwind playground. that's easier for us

EIO•8mo ago

For overflow scroll to work on any axis (x or y), these conditions need to be met: - Content size should be more than the parent size - The size of the content shouldn't shrink to fit into the parent (The effect of flex on its children) - The size (or max size) of the parent would have to be specified to stop the parent from expanding to the content size - overflow on that axis has to be set to either scroll or auto So, like @MarkBoots said, add the overflow-auto. If that doesn't work, check out the remaining constraints

Kryp ArnoldOP•7mo ago

i just gave up on that design it was not practical but thanks though

Gaming

Programming

Can't horizontal scroll