Tailwind css herizontally scroll with overflow won't working

Question

I have 1 div with exact width 300px and if the window size is less than that I want to be a scrollable herizontally , I've use overflow-x-auto but It still not working and that div is getting smaller as window size here's my code

  <div>
        <div className="flex h-screen  overflow-scroll">
          <div className="bg-red-400 w-[200px] ">
            <input type="number" className="p-1 rounded m-2" />
          </div>
          <div className="bg-blue-300 w-[100px] sm:w-full sm:bg-red-500">
          <Select
              className=" m-2 "
              defaultValue={selectedOption}
              onChange={setSelectedOption}
              options={options}
            />
          </div>
          <div className="bg-gray-200 w-[300px] overflow-y-scroll ">
            {result}
          </div>
        </div>
    </div>

Nathan Dawson · Accepted Answer · 2022-04-09 01:59:46Z

2

You're setting fixed widths on elements that are within a flex container. When the parent container shrinks, child elements will scale accordingly.

Set flex-none on elements that should remain at a fixed size, regardless of the space available.

<div className="bg-gray-200 flex-none overflow-y-scroll w-[300px]">

answered Apr 9, 2022 at 1:59

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind css herizontally scroll with overflow won't working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related