Steps for creating scrollable boxes with uniform size using tailwindcss:1. Define a specific width and height for

 <div className="overflow-x-auto p-5 gap-5">
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
    <div className={` bg-orange-700  w-[300px] h-[300px]`}></div>
  </div>

Trying to implement overflow-x-auto to make the content horizontally scrollable, but it's not working as expected. How can I achieve this effect?

https://i.sstatic.net/eOLXp.png

The content is currently displayed vertically, and using flex changes it to horizontal layout but doesn't enable scrolling. Is there a way to make it horizontally scrollable while keeping the size intact?

cssnext.jstailwind-css

Answer №1

To prevent the child elements from reducing in size, apply the flex-shrink-0 property.

<script src="https://cdn.tailwindcss.com"></script>

<div class="overflow-x-auto flex p-5 gap-5">
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
  <div class="bg-orange-700 flex-shrink-0 w-[300px] h-[300px]"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...

cssreactjssass

The mobile functionality of the stylesheet is not functioning properly

Recently, I came across an issue with a stylesheet designed for mobile devices that contains the following code: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Surprisingly, this code failed to work ...

cssmedia-type

What are the best ways to resolve the Largest Contentful Paint (LCP) problem on mobile devices?

<div className={styles.imgContainer}> <Image style={{ objectFit: "cover" }} src="https://res.cloudinary.com/di7j408eq/image/upload/v1685516535/outdoor-living-slider_1_nsnsnr.webp&q ...

performancenext.jslighthousepagespeed-insights

The error message `_this2.flipBook.getPageFlip is not a function` indicates that there is

I had previously implemented react-pageflip in a Reactjs project using the code below, and it functioned correctly. However, after copying the same component to a Nextjs project, I encountered the following error: Error: TypeError: _this2.flipBook.getPage ...

reactjsnext.js

How to dynamically change the content of the <header> in Nextjs depending on the loaded component

I recently finished creating a app/components/Header.js component. export function Header() { return <> <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white"> <div ...

javascriptreactjsnext.jsnext.js13

What is the best way to set a stationary background that scrolls on a responsive webpage?

I'm working on a responsive website with alternating sections featuring fixed background images where the content is meant to scroll over the image. However, I'm facing an issue on iOS where the background image zooms into a small section and sca ...

htmlioscssresponsive

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

htmlcsscheckbox

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...

javascriptcssreactjsmaterial-ui

CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...

javascripthtmlcssanimationdata-visualization

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

htmlcss

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3

"implement customer" import React, { useState } from "react"; import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; export default function HeroSlider() { const images = [ "/images/homepage/home-1.jpeg&qu ...

javascriptreactjsnext.jscomponents

Problem encountered during NextJS build: ReferenceError - 'window' is undefined

While I am in the process of developing my app, I have encountered a perplexing issue with a ReferenceError: window is not defined. This error seems to be happening even though I am utilizing 'use client' "use client"; import React, { u ...

typescriptfirebasenext.jsbuildreferenceerror

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

Currently, I am in the process of creating a CSS dropdown menu. The main dropdown (the first ul) has a position set to relative, while the second dropdown has its position as absolute. However, using absolute causes this issue: On the other hand, settin ...

htmlcss

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

What is the best way to align two span tags to the right on separate lines?

I am facing an issue with the positioning of three span tags: A is floated left while B and C are floated right. My desired layout is to have C positioned below B, both floating right on separate lines. I attempted using display:block for B but it did not ...

csscss-floatblockhtml

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...

javascriptjqueryhtmlcss