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>
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]">
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
Changed the height of the flexbox (h-40) and set the image height to full (h-full). In this case the height of the image changes and fills the entire container, keeps the aspect ratio which is good and expected.
But the container div (with blue background) does not change in width, just in height.
How can I make this div to be as same width as the image?
https://codepen.io/lordjancso/pen/eYKOVRN
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-around h-40">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Apply the w-fit utility on the images' container. w-fit, which is the width: fit-content; class in CSS, will use the available space, but never more than max-content.
<div class="flex flex-row justify-around h-40 w-fit">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Tailwind-play
I have 2 divs under 1 div.
first div should be w-64.
second div's width want to be the rest except for 64.
How to make it?
and if I use grid then how to make that?
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen" >
</div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
You can add to the second div two Tailwind properties:
w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
After that we offset the second div with ml-auto.
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen"></div>
<div className="grid w-[calc(100vw-16rem)] ml-auto bg-blue-100 justify-center items-center">
{children}
</div>
</div>
Grid solution
For the grid, we need to add a grid property to the parent element and set two columns grid-cols-[16rem_calc(100vw-16rem)]. The first column is static, and the second is responsive. We also need to remove all properties from the first child element.
<div className="grid grid-cols-[16rem_calc(100vw-16rem)] w-screen h-screen ">
<div className="flex"></div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
In the above code, I want only the div with class projects to be scrollable while holding the dates and footer fixed on their places. how to do that using tailwind.css ?! I also want the div with class main to be scrollable vertically while holding the other two divs fixed on their places without scrolling.
It sounds a bit like a common usage of overflow-y.
For example, you could add this CSS rule to your project's class:
.projects {
overflow-y: scroll;
}
You can add this rule to whichever container you want to be scrollable - in this case vertically.
On the other, there is overflow-x: scroll for horizontal scrolling, or overflow: scroll for both (shorthand).
According to tailwind overflow guide, you can use .overflow-y-auto for vertical scrolling.
e.g.
<div class="projects flex-grow overflow-y-auto px-4">
It's good that you have used .flex-grow otherwise you would have to give a max-height to the div.
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr/>
<div class="projects h-auto overflow-x-auto flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr/>
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>