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

Ways to tidy HTML/XML code?

Upon receiving a web service response, the data appears as such: <text>&lt;span class="TitleServiceChange" &gt;Service Change&lt;/span&gt; &lt;span class="DateStyle"&gt; &amp;nbsp;Poste ...

javascripthtmlxmlweb-servicesrest

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the righ ...

htmlcssresponsive-designfluid-layout

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...

csstwitter-bootstraptwitter-bootstrap-3imagemap

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth

How to set DIVS to be hidden when the page first loads

I am currently working on a project where I need to use JavaScript to hide certain <div> elements when the page loads. I have also included jQuery in my code. Below is what I have tried so far: $(document).ready(function() { hide(); function hid ...

javascriptjqueryhtml

Sending the results from a Vue.js component to a text input field in HTML

Using vue.js and the v-for function to read QR codes has been a challenge for me. For example: <ul v-for="(scan,key) in scans" :key="key" > {{scan.content}} </ul> I need to extract the value inside {{scan.content}}, like an EmployeeID, but I ...

javascriptjqueryhtmlvue.jsqr-code

Bootstrap - Utilizing a boxed grid within a div located in the .fluid-container

Can you please review these two images? I'm trying to place ".myDivInTheGrid" inside a boxed bootstrap div. Any ideas on how to do this? This is what I currently have... <div class="fluid-container"> <div class="col-md-6"></d ...

htmlcsstwitter-bootstrap-3

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

javascriptphphtmlwordpress

Effective ways to transmit a variable array from an HTML document to a PHP server

Is there a better method for transferring a variable array from HTML to PHP? I attempted to use the serialize function, but it doesn't seem to be functioning correctly. Any suggestions would be greatly appreciated. //HTML var arrayTextAreasNames = [ ...

javascriptphphtml

If no content is present in a cell of an HTML table, alter the row

I am attempting to create a CSS table that changes the row color if any cell in the row is empty. Here's what I have so far: <style type="text/css"> td:empty { background-color: red; } </style> Is there a way to change th ...

htmlcss

What steps should I take to adjust the price when multiple items are chosen?

I am working on a school project that requires JavaScript programming assistance. You can view the code here: https://jsfiddle.net/zvov1jpr/3/ HTML: <script src="java.js"></script> <div id="formular"> <div id=&qu ...

javascripthtml

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

I have tried various solutions to restrict input in an Angular material input box, but none seem to be effective for my specific case. I need the input field to only allow numbers and a decimal point. Any other characters should be automatically removed as ...

javascripthtmlangulartypescriptangular-material

CSS Animations as an Alternative to jQuery's fadeIn(), fadeOut(), and fadeTo() Functions

I currently have the following code snippet: $('#button1').click(function(){ $('#header_bg').fadeTo(15, 0, function() { document.getElementById('header_bg').style.fill = '#FF0000'; }).fadeTo(&ap ...

jquerycssiosmobiletransition

Embedding complex JSON information into an HTML dropdown menu

Here is a JSON string that I am working with: { "electronics": { "cameras": [ "sony", "nikon", "canon" ], "TV": "none", "laptop": [ "hp", "apple", "sony" ] }, "home": { "furniture": [ ...

htmljsonangularjstwitter-bootstrap

Having issues when dynamically adding options to a multiselect dropdown

I'm working on dynamically adding options to a multiselect using AJAX: <select size='2' name="CraftCode" id=@ccrf class="form-control js-select manualentrydd" ></select> $.ajax({ type: "GET", url: "GetCraftCodes", data: ...

javascriptjqueryhtmlajaxmulti-select

A step-by-step guide to displaying a list with material icons in a React JS application utilizing the Material

I tried implementing a dropdown list with Material-UI, including an icon on the left side. However, after following the documentation and adding the code for the icon, the dropdown list stopped working. InputProps={{ startAdornment: ( ...

htmlreactjsmaterial-uinext.js13tailwind-ui

Extract the content of a textbox within an iframe located in the parent window

Is it possible to retrieve the value of a text box in an iframe from the parent page upon clicking a button? Below is an example code snippet showcasing the situation: <div> <iframe src="test.html" > <input type=text id="parent_text"> & ...

javascriptjqueryhtmliframe

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

From the title, it's evident that this bug is both intriguing and frustrating. The issue lies with a regular select element in an Angular partial containing the following code: <select ng-options="availweek.weekNumber as availweek.weekNumber for a ...

htmliosangularjs

Resizable dimensions for the dark mode switch

My latest project involves creating a toggle button for switching between light and dark themes using CSS, HTML, and JavaScript: id("theme-btn").addEventListener("change", function() { if (this.checked) { qs(".box").setAttribute('style', ...

javascripthtmlcss

What is the method for emphasizing links in the navigation bar with Bootstrap 3?

I am currently working on applying custom CSS styles to the Bootstrap navbar in order to have the link text underlined when hovered over, with a fade-in effect as well. To see what I have accomplished so far, you can view it here: https://jsfiddle.net/xfd ...

htmlcsstwitter-bootstrap