How to make boxes contain the same size and scrollable using tailwindcsss-CodePudding

 <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>

According to the doc overflow-x-auto will make this horizontal and scrollable. Which does not work?

It is just vertical as it is and how can I make this horizontally scrollable? flex makes them horizontally listed but then it reduce the size and does not make it scrollable.

CodePudding user response：

Add flex-shrink-0 to the child elements in order to make them avoid reduced size.

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

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>