What is the best way to incorporate a scroll bar into my content area with Tailwind CSS?

When there is just a bit of content inside, it looks like this:

https://i.sstatic.net/E7Vow.png

However, when I add a lot more content, it ends up looking like this:

https://i.sstatic.net/dDSj0.png

This pushes the search bar down. My desired outcome is for the content section to expand and fill up the remaining available height on the user's screen, but never exceed the 100vh of the container. Ideally, a scroll bar would appear if the content goes beyond the container.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="flex flex-col h-screen items-stretch bg-blue-300">
  <div class="flex flex-col flex-grow pt-3 bg-gray-100 rounded">
    <div class="flex border-b border-gray-300 pl-3"><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 ">First Tab</button><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 bg-white border border-gray-300 border-b-white">Second Tab</button></div>
    <div class="bg-white flex flex-col flex-grow py-5 px-5 relative border-b space-y-4 border-gray-300">
      <div class="space-y-4">
        <p class="text-gray-400">25th November 2021</p>
        <p>This is some content... (continued) ...content</p>
      </div>
    </div>
    <div class="flex justify-center py-3 h-16 ">
      <div class="flex flex-grow px-3">
        <div class="flex flex-grow rounded ">
          <div data-testid="input-container" class="border-gray-300 flex flex-grow rounded border ">
            <div data-testid="call-history-search-icon-container" class="flex px-4 py-2 items-center text-gray-600 bg-gray-200 "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128...
                  </svg></div><input type="text" name="call-history-search" id="call-history-search" data-testid="call-history-search" placeholder="Start typing to search..." class="px-3 flex flex-grow...
          </div>
        </div><button data-testid="search-reset-button" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded text-white ml-7"><svg stroke="currentColor" fill="currentColor" stroke-width=0 ...
      </div>
    </div>
  </div>
</div>

An example of my progress in Codepen:
https://codepen.io/andydmc/pen/dyzxYKw?editors=1010

htmlcssflexboxtailwind-css

Answer №1

I only made two adjustments:

Modification #1 (line 6):
I included the class max-h-screen to establish a maximum height for the container equal to the viewport height.

Modification #2 (line 10):
I introduced the class h-0 to set the element's height to 0, then allowed it to expand and occupy all remaining space within the viewport using flex-grow. To handle overflow with a scrollbar, I applied the class overflow-y-auto.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="flex flex-col h-screen items-stretch bg-blue-300 max-h-screen"> <!--Change #1 -->
  ...
      <div class="space-y-4 h-0 flex-grow overflow-y-auto"> <!-- Change #2 -->
        ...
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Excessive Blank Areas

I needed to create 3 horizontal paragraphs side by side, and the only solution I found was using the position property, but it didn't turn out as expected. Despite my efforts to make it look clean, it always ends up like this. Below is the code I use ...

htmlcss

What is the best way to retrieve the contents of the first and second lines from a textarea input field?

I'm seeking a way to extract the content of the first and second lines from a textarea in HTML. The challenge lies in the fact that the first and second lines may have varying lengths, making it impossible to simply copy a set number of characters. ...

javascripthtml

What is the best way to dynamically assign a random file from a folder as the background image using CSS property in JavaScript?

Algorithm in Pseudo Code: if currentCondition equals snow { aFunction() } else { // execute something different } function aFunction { search for images inside the snow directory at /images/condition/snow select a random jpeg/jpg from th ...

javascriptjqueryhtml

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

javascriptjqueryhtmlcss

Content is cleared from the leaflet popup upon first closure

In my application, I've been working extensively with Leaflet and have a good grasp on the "leaflet way" of doing things. Since I have a single static layout for all my markers, I decided to create a simple Mustache template to insert variable data a ...

javascripthtmlleafletcanjs

Attaching the CSS file to the Haml layout template

I'm currently working on linking a css file to a haml layout template Within the ApplicationHelper class, I have a method to properly generate html module ApplicationHelper def styletag(sheet_name) "<link rel='stylesheet' href=&a ...

htmlcssruby-on-railshaml

Setting up the nth-of-type() function to dynamically target elements in sequence

I need to apply specific CSS styles to elements in a certain order within an image carousel. The carousel may contain any number of images, but only three images are displayed at a time. I want to style the first and third images differently from the secon ...

csscss-selectors

Issues with Bootstrap v4 in a Spring, Thymeleaf, and Java8 setup

While making the transition from bootstrap v3.3.7 to v4, I encountered a problem where the page was loading without any styles. I attempted different methods to fix this: Using CDN URLs (which worked, but wasn't ideal for me). Adding CSS/JS files lo ...

javahtmlspringbootstrap-4thymeleaf

The links located beneath the iframe/span element are unclickable

My latest creation is a static advert ticker positioned at the bottom of the window. It's contained within an <iframe> for easy placement on other websites. I added a <span> around the <iframe> to keep it fixed at the bottom of the s ...

cssiframehtmlpointer-events

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

This is a discussion on creating a responsive image gallery website with images of different sizes and no margins or paddings. The issue at hand is that the .showcase class hides at a specific @media breakpoint when resizing, but there is a desire to displ ...

htmlcssresponsive-design

Switching from vertical pills to horizontal tabs for smaller screens

I have a vertical pills menu that looks great on large screens, but takes up too much space on small screens. Is there a way to switch it to a horizontal tab layout for smaller screens? I tried searching online for examples but couldn't find any. < ...

csstwitter-bootstrapbootstrap-4

Please reset the form fields after the most recent edit

I've created a form that includes multiple select elements. When an option is selected, it activates the next select element and updates it with values using Ajax and PHP. However, I'm facing an issue where changing a previous option only resets ...

javascriptjqueryhtmlajax

Converting a JSON array into a single concatenated string

Currently, I am parsing a JSON file that contains data about multiple users. { "SRM": [{ "title": "Firstname Surname", "image": "firstname", "subtitle":"the subtitle" }, { "title": "Firstname Surname", "image": "firstname", "s ...

jqueryhtmljson

The jQuery script effectively applies a class when needed, but encounters difficulties when trying to remove the class afterwards

Essentially, I am looking for an element that, when clicked, activates a jQuery script to add or remove a specific class (in this case, adding a class that changes the background image CSS attribute) to only that particular element. function readMore( ...

javascriptjqueryhtmlcss

What kind of display effect occurs when a box is hovered over?

Hey there! I tried to create a visual representation of the issue I'm facing. If you want to take a look, just click on this link This is how the code appears: HTML: <a href="#">Hover Me!<span class="tooltip">Hello, World!</span>& ...

javascriptcsshoverhtml

Initiate the height animation starting from the bottom rather than from the top

As the title suggests, I am looking to initiate the height animation starting from the bottom rather than the top. While this question has been asked before in places such as here, it does not provide the solution I am seeking and involves the use of jQuer ...

htmlcss

Instructions for setting up a datatable with sorting, pagination, and search functionality

I've been experimenting with a datatable setup similar to that showcased on datatable.net, but I'm unsure about the best approach to populate the table in a manner that will enable it to function as demonstrated in this example: https://datatable ...

jqueryhtmlflaskdatatable

What is the best way to select a specific image from a collection of images within my Ajax form?

Currently, I am new to AJAX coding and still trying to familiarize myself with it. I have managed to create an AJAX multi-page form where each "new" page is contained within divs in HTML. The CSS is responsible for the styling, and there is some JavaScript ...

javascripthtmlcssajax

dimensions of an element in percentage using css and html, accompanied by some peculiar attributes

I encountered an issue with some CSS and HTML code. The code works perfectly fine in Chrome and Firefox browsers, but when I try to inspect it using developer tools on mobile view, the min-height:100%; property does not seem to be applied. I have attache ...

htmlcss

Showing a section of a DIV inside an iframe

I have implemented an HTML object in the following way: <object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object> However, I do not want to display the entire content of mypage.aspx within the HTML object/iframe. In ...

javascriptjqueryiframehtml