Allow children to fit seamlessly in Bootstrap while enabling scrolling for other children

Is there a way to make the height of my container fit the content in the left column, while allowing the right column to scroll if it overflows? Here is an example of what I am working with:

<div class="container">
   <div class="row">
      <div id="left-col" class="col-4">...</div>
      <div id="right-col" class="col-8">...</div>
   </div>
</div>

I would like the .row div's height to adjust to the content in #left-col, while allowing the content in #right-col to scroll when necessary. Any suggestions on how to achieve this? Thank you!

htmlcssbootstrap-4

Answer №1

Hopefully, this information will be of assistance to you.

  #right-col{
    position: absolute;
    right: 0;
    height: 100%;
    overflow: auto;
  }
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
   
<div class="container">
   <div class="row position-relative">
      <div id="left-col" class="col-4">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      </div>
      <div id="right-col" class="col-8">
      What exactly is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum became popular in the 1960s with the release of Letraset sheets containing passages of Lorem Ipsum, and more recently with desktop publishing software like Aldus PageMaker containing versions of Lorem Ipsum.

Why do we use Lorem Ipsum?
It is a known fact that a reader will be distracted by the readable content of a page when looking at its layout.
      </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

Issue with CSS background scaling bug

Is it possible to make the cloud background scale within the box? The current issue can be viewed here: I have tried various methods to resolve the problem where the background scales even beyond the limited box. However, I could not identify the solutio ...

htmlcssanimationbackground

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

javascriptcssreactjsdatagridmaterial-ui

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in tru ...

htmlcsshtml-table

Clicking does not trigger scrollIntoView to work properly

I'm facing an issue with a button that is supposed to scroll the page down to a specific div when clicked. I implemented a scrollIntoView function in JavaScript and attached it to the button using onClick. Although the onClick event is functioning as ...

javascripthtmljquery

The font styles shift and vertical bars vanish when placed under images

I'm currently facing some challenges with the text placement beneath the images on my website that I am constructing: 1) The font for "Back to home page" unexpectedly changes from the specified style (Georgia, 0.9em) in Firefox but remains consistent ...

cssimagefonts

Managing the overflow of flex-boxes

I'm currently working on setting up a profiles section on my website featuring 4 profile boxes: https://i.sstatic.net/lWrPA.png While the layout looks good on larger screens, I am facing issues with how the boxes wrap on smaller screen sizes. Right ...

htmlcssflexbox

Exploring the World of React Variables

Recently, I've been diving into the world of React and encountered some challenges while styling my components. Personally, I find it more organized to style within the same JavaScript file instead of having a separate one. However, I'm curious a ...

cssreactjs

Troubleshooting problem with CSS layout when adjusting the height of a section

I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far. However, I've encountered a section of the site that seems to have a mind of its own. When I ass ...

csshtml

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

javascriptjqueryajaxjsonhtml

Modify the paragraph's class upon clicking the radio button

I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected. If anyone has any insights or suggestions on how to fix this issue ...

javascripthtmlcssradio-buttondom-events

After deployment, certain formatting elements appear to be skewed in the React application

After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...

cssreactjsdeploymentmaterial-uistyles

I'm looking for an easy way to generate a special effect when my mouse interacts with a div using HTML, CSS, or JavaScript

I'm attempting to replicate this interesting effect where a div is surrounded by a container when the mouse hovers over it. It looks pretty cool, like in this image here: https://i.stack.imgur.com/p0epq.png Does anyone have any suggestions on how I ...

javascripthtmlcss

Implementing jQuery UI Dialog for inserting form data into mySQL database

I have integrated the jQuery UI Dialog for user registration on my website. While the dialog functions properly, I am facing an issue with the AJAX call when the form is submitted. Despite searching online for a solution, I have not been able to find one t ...

phpjqueryhtmlajaxuser-interface

Information backed by the HTML5 Local Storage feature

Is it possible to use a Local Storage object to store another Local Storage object? Thank you in advance. ...

javascripthtmllocal-storage

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...

javascripthtmljquerycssgoogle-apps-script

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

What exactly does the <cbn-root> HTML element signify, and how can it be parsed using Java programming language?

I attempted to develop a Java program to monitor the availability of reserved spots on this website: However, when I examine the page source using Chrome or Edge, only <cbn-root></cbn-root> is displayed in the body section. Yet, utilizing Chro ...

javahtmlhtmlunit

Efficiently formatting text in a div container

How can I ensure that the text within a span is word-wrapped inside a div? https://i.sstatic.net/W691d.png Here is the code snippet: <div class="col-xs-6 choice btn btn-default" > <span class="pull-left">(Kepala) Bagian Purchasing (not lis ...

csstwitter-bootstrap-3

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Display a substitute image if there is no internet connection available to load the Google Map Canvas

I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...

javascripthtmlgoogle-maps