Question 328199 in CSS Question posted in
Some basic documentation can be found here.

Css – Tailwind flex container not showing overflow in X axis, why?

I am a bit confused about the way this code works. I am new to tailwind and I don’t know if I am missing something important, but a simple code that pretends to display a couple of elements horizontally inside a div, and pretends to generate overflow in both X and Y axis, only appears to be working on the Y axis and I don’t understand why. I tried it in vanilla HTML/CSS and it worked as expected, but not in TailwindCSS.

Anyone can try it in the Tailwind Playground (https://play.tailwindcss.com/), just paste the code and you’ll see that the overflow only appears in the Y axis, but not in both as I would want to. Any help is appreciated.

<div class="flex h-[400px] w-[1000px] gap-24 overflow-auto">
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
</div>
Tags:

3

Answers


  1. 0

    you can play with length and width to find out overflow-x and overflow-y

    <div class="flex h-[400px] w-[1000px] gap-24 overflow-auto">
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
</div>

    if you confused about the overflow, you can read this:

    overflow-y

    overflow-x

    Login or Signup to reply.
  2. 0

    This code could fix your code as per your reuirement

    <div class="h-[400px] overflow-y-auto">
  <div class="flex w-[1000px] gap-24 overflow-x-auto">
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  </div>
</div>
    • The outer div has a fixed height of 400px and allows vertical
      scrolling (overflow-y-auto).
    Login or Signup to reply.
  3. 0 
    <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>

<div class="h-[400px] overflow-y-auto">
  <div class="flex w-[1000px] gap-24 overflow-x-auto">
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
    <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  </div>
</div>

    1. Used overflow-y-auto on the outer div to allow vertical scrolling.

    2. Used flex and overflow-x-auto on the inner div to allow horizontal scrolling for child elements that exceed the container’s width.

    Try it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search