Achieve scrollability for right column (div) using Tailwind CSS

I am having trouble getting the content in the right column to scroll vertically. Can someone please help me identify what I'm doing wrong here? 

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<html>
  
  <body>
    <main class="h-full">
      <div class="container flex items-start min-w-full fixed">
         <div class="w-1/5 min-h-screen bg-blue-darkest text-teal-lightest">
           bladieblabla
        </div>
         <div class="w-4/5 flex content-center pt-6 min-h-screen w-full lg:static lg:max-h-full lg:overflow-visible bg-yellow" >
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies elit sed varius semper. Cras elit nunc, auctor eget magna nec, posuere scelerisque sapien. Suspendisse volutpat, turpis vitae sagittis lacinia, felis nisi fermentum massa, ut fringilla tortor lacus eu augue. Morbi nunc odio, ullamcorper vel porta nec, maximus ac orci. Nulla quis accumsan magna. Suspendisse sollicitudin molestie lectus vitae imperdiet. Fusce fermentum convallis volutpat. Praesent et malesuada justo, non varius quam. Fusce faucibus lacus elit, in sodales ex blandit tincidunt. Nunc mollis cursus purus sed convallis.

Duis consectetur in urna volutpat maximus. Sed viverra placerat enim ut venenatis. Praesent cursus diam facilisis turpis tempor accumsan. In vel sollicitudin orci, id volutpat turpis. Donec mattis, lacus nec eleifend venenatis, turpis leo rutrum ante, sit amet laoreet nulla mauris in velit. Curabitur hendrerit leo leo. Phasellus sit amet sem non mi pharetra pharetra vitae in sem. Nullam egestas, metus nec imperdiet ornare, est neque luctus diam, eget elementum mi ante non leo. Aenean maximus nisi vitae aliquam ullamcorper. Donec et lectus quam. Maecenas sit amet placerat mi. Maecenas cursus mauris et purus fermentum, ac sagittis quam varius. Praesent non magna dictum, pulvinar magna at, consectetur risus. Mauris pretium, massa non posuere condimentum, diam est mattis nibh, non gravida odio augue vitae eros.

... (trimmed for brevity) ...

Cras sagittis nibh et posuere placerat. Vestibulum hendrerit at nulla vitae luctus. Vestibulum maximus ex at justo lacinia pellentesque. Ut fringilla mauris sem. Aenean ut dictum est. Curabitur eu dolor nibh. Quisque volutpat metus at elit tempor, eu ornare lectus bibendum. Integer tellus neque, ullamcorper id feugiat eu, vestibulum nec mi.
           </div>
         </div>
      </div>
    </main>
    
  </body>
</html>

htmlcsstailwind-css

Answer №1

To achieve a scrollable section for the content inside the parent container with the class .contact, you need to add the class overflow-y-auto to the parent div and set a fixed height using the max-height property as shown below:

.contact-parent{
    max-height: 150px;
}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<main class="h-full">
      <div class="container flex items-start min-w-full fixed">
         <div class="w-1/5 min-h-screen bg-blue-darkest text-teal-lightest">
           bladieblabla
        </div>
         <div class="contact-parent overflow-y-auto w-4/5 flex content-center pt-6 min-h-screen w-full lg:static lg:max-h-full lg:overflow-visible bg-yellow" >
            <div class="content">
                Insert a long paragraph of lorem ipsum so there's enough content to trigger overflow

...

Integer tellus neque, ullamcorper id feugiat eu, vestibulum nec mi.
           </div>
         </div>
      </div>
    </main>

Answer №2

By making use of the .h-screen class, you can easily achieve full viewport height with 100vh. Additionally, the .overflow-auto class provides the functionality for scrolling within a container.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<html>

  <body>
    <main class="h-full">
      <div class="container flex items-start min-w-full fixed">
         <div class="w-1/5 h-screen bg-blue-darkest text-teal-lightest">
           bladieblabla
         </div>
         <div class="w-4/5 flex content-center pt-6 bg-yellow h-screen overflow-auto">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
          </div>
        </div>
      </div>
    </main>
    
  </body>
</html>

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

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

I am currently working with VueJS and attempting to send a GET request to my API. I am using axios, but encountering an issue when trying to import it. If I use require for the import, I receive this error: Uncaught ReferenceError: require is not defined. ...

javascripthtmlvue.jsaxiosget

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

I am facing an issue with my code while using canvas to draw a cropped image with base 64. The problem is that it works perfectly on Chrome but gives me a blank image on Firefox. async function base64SquareCrop(imgbase64, size = 224) { const img = docume ...

javascripthtml

Can variables be declared for file paths within the HTML code in a TypeScript file?

We utilize the Vaadin designer to create the frontend of our project. Within the .ts files, we have images where we aim to establish variables for the file paths. Currently, the setup looks like this: <img src="../../themes/light/img/example.jpg&q ...

htmltypescriptvaadinvaadin23vaadin-designer

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

phpjavascriptjqueryhtmlajax

What is causing the unusual behavior of z-index in this specific scenario?

I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...

htmlcss

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

Get hexa values from a colorpicker and use them as a background in an angularjs application

I'm currently working on an angularJS project and I've implemented an HTML color picker. My goal is to assign the selected color from the color picker to my div element, ensuring that the values are in hexadecimal format. Below is a snippet of my ...

angularjshtmlcolor-picker

Concentrate on user input in PHP programming

My goal is to create a PHP validation form where errors are displayed correctly every time. However, I am encountering an issue with setting focus on the input field with an error if one occurs. I have variables like $rut_error, $first_name_error, $last_na ...

phphtmlfocus

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

Working on a React application that makes use of Firebase Firestore for handling database operations, I recently upgraded to Firebase version 9 and adopted the modular syntax for importing Firebase services. Nevertheless, when attempting to utilize the co ...

javascriptpythonhtmlcssreactjs

children in CSS grid expanding beyond grid boundaries

I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below: <div class="app"> <div class="header"> Header </div> ...

htmlcss

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts. The divs include: Juicebox Photo Gallery; ...

csswebformsbootstrap-4drupal-8drupal-views

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

javascriptjqueryhtmlcssload

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display the HTML content retrieved from the SailsJS Controller

Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...

javascripthtmlnode.jssails.jsejs

Having trouble getting the form input max-width to work properly within a flex-box

My webpage features a header containing various icons, a title, and a search box that triggers an animation when the search button is clicked. While this setup works seamlessly on larger screens, I encounter issues on smaller screens. My goal is for the se ...

htmlcssflexbox

Need help positioning this HTML iframe on my webpage?

Can anyone help me figure out how to position this HTML i-frame in a specific place on my webpage? <div style="overflow: hidden; width: 333px; height: 156px; position src="h: relative;" id="i_div"><iframe name="i_frame"http://url.com/click.php?a ...

htmlcss

Execute function upon changing the title of a list item using jQuery

Hey there, I've got a question for you. Is it possible to trigger an event when the title of a list element is changed? For example: <ul> <li id="li_1" title="40">40</li> </ul> So when the title attribute changes (coming ...

htmljquery

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Recently, I started using TypeScript for the first time and I'm looking to integrate it into my webpack build. Currently, I am working with ts-loader and babel-loader to load TypeScript files while also attempting to include HTML files within the scr ...

htmltypescript