This is my first post, I have a problem shown below: since I am offsetting the 3 images by -172px to the right and have the position set as absolute I get these scroll bars when the content doesn't fit. I set the "home" section with h-screen but it only works if everything that needs to be show fits in the screen.
I want to remove the h-screen and just have the "home" section automatically fit everything.
How do I do that?
.hero-img {
width: 100%;
height: auto;
}
.img-container {
max-width:345px;
max-height:580px;
}
.inner{
position: absolute;
right: -172px;
}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<section id="home" class="main lg:pl-28 flex flex-wrap flex-row w-full h-screen">
<div class="flex flex-col w-full lg:w-5/12 justify-center lg:pr-28 bg-green-200">
<p class="text-lg mb-0 text-gray-600">Title 1</p>
<h1 class="mb-4 text-3xl md:text-5xl font-bold leading-tight text-center md:text-left slide-in-bottom-h1">Title 2</h1>
<p class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left slide-in-bottom-subtitle">Title 3</p>
</div>
<!--Right Col-->
<div class="outer w-full lg:w-7/12 overflow-x-hidden relative flex items-center bg-red-200">
<div class="flex gap-4 inner">
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
</div>
</div>
</section>