What steps can be taken to stop a list from exceeding the boundaries of its parent <div>?

Currently, I am dealing with a list (#this-list) that has an input box below it. Whenever a user submits something in the input box, it gets added to the list #this-list (all of this happens within react.js). The issue arises when the list grows too long and causes the parent <div> to resize. Is there a way to restrict the size of the list to the available height and display scrollbars when it starts overflowing?

...
        <div class="d-flex flex-column h-100">
            <div class="flex-fill scroll-y">
                <ul id="this-list">
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                </ul>
            </div>
...

View the page when the list is empty: https://jsfiddle.net/tomwassing/g7dkLx1h/

Check out the page when the list is filled: https://jsfiddle.net/tomwassing/u80wqj3s/

csstwitter-bootstrapflexboxbootstrap-4overflow

Answer №1

To ensure that the ul element has a scrollable feature, you can easily set a height or max-height property along with overflow-y: scroll.

#my-list {
  height: 200px;
  overflow-y: scroll;
}

Check out this example on JSFiddle

Answer №2

It appears that the issue at hand is related to the height of your divs not being limited, allowing them to take up more space than necessary (default height is set to "auto").

An effective solution could involve implementing a JavaScript script that calculates the height of the left column and then dynamically adjusts the right column accordingly:

document.addEventListener("DOMContentLoaded",()=>{
    let leftForm = document.getElementById("left-form");
    let leftHeight = Number(
        getComputedStyle(leftForm).getPropertyValue("height").slice(0,-2));

    let rightForm = document.getElementById("rightForm");
    let rightFormHeight = Number(
        getComputedStyle(rightForm).getPropertyValue("height").slice(0,-2));
    myDiv.style.setProperty("max-height",leftHeight - rightFormHeight + "px");
})

Additionally, be sure to include either overflow: scroll or overflow-y: scroll for "myDiv" (the container of your overflowing list).

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

Retrieving selected checkbox value using Bootstrap and jQuery

Hi there! I am currently working on a form where I need to check if a checkbox is selected, and if it is, I want to pass that data into a hidden field as the value for my form submission. The code snippet below shows what I have so far: ### Update User Pr ...

phpjquerytwitter-bootstrap

Arranging DIV elements into rows and columns within a table

After working all night to fix a problem, my goal is to create this timetable: https://i.sstatic.net/dAt1J.png Specifically, I'm struggling to find a solution for rows 5, 6, and 7 in the first column. The image is from a program that only runs in IE ...

phphtmlcssbootstrap-4

Tips for creating a sticky Bootstrap 4 table header that remains at the top of the page as you scroll

Currently utilizing the argon dashboard from creative tim found at . I am looking to keep the table header fixed at the top of the page while scrolling. I attempted to use the sticky-top class, but it did not produce the desired result. ...

bootstrap-4argon

Can you provide instructions on accessing the profile of a user by clicking on their name?

I created this blog and I want to be able to redirect the website to a specific user's profile when clicking on their profile from any post. Currently, I can only retrieve the profile picture of the currently logged-in user. What steps should I take t ...

pythonhtmlcssdjango

When the webpage is displayed from the server, the width of the HTML page appears

When viewing an html page, $(window).width() is displaying different values when hosted on a server compared to locally. Even though my laptop's resolution is 1920 X 1080, the width shows as 1920 when opened in Firefox and Chrome locally, but only as ...

htmlcsszurb-foundation

Is there a way to modify the background colors of even divs?

Having trouble changing the color of my divs. I am unsure how to set a different background color for each even div contained within an li element. For instance: <ul> <li class="demo1"> <div class="d"> CO ...

htmlcssreactjs

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

javascriptjqueryhtmlcss

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...

jqueryhtmlcss

Implementing pagination for a scrolling tab group with a flexible number of buttons

I need to implement a pagination feature in my scroll function where users can select from a list of tabs/buttons and it will automatically scroll to the corresponding div/tab. Currently, I have a while statement that generates songs from my database, with ...

phpjquerycss

Display Highcharts in an HTML table format

As I work on developing a system that generates various types of graphs, my goal is to synchronize a chart and table so that when the chart is DRILLDOWNED, the table will also update. Is there a method to convert the data currently displayed by HighChart ...

htmlcssarraysjsonhighcharts

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

htmlcssaspect-ratio

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

cssangularmodulebootstrap-4

adjust the value of an attribute in a dynamic stylesheet using jquery

I'm trying to create a dynamic stylesheet using a combination of jquery, css, php, and html. My approach involves making an ajax request (using jquery) to pass the width of my screen to a php css file. However, I am facing an issue where the php css f ...

phpjqueryhtmlcssajax

Stretch out single column content vertically in bootstrap for a uniform look

I've been struggling to make multiple buttons vertically stretch to fit the container, but I can't seem to remember how I achieved this in the past. I have experimented with various options outlined on https://getbootstrap.com/docs/4.0/utilities/ ...

javascripthtmlbootstrap-4

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

htmlcsstwitter-bootstrap

The issue of table borders disappearing persists when loading a link within an iframe on Internet Explorer 8

Here you can find the code: Zipped test case I have created a simple table with some external CSS styles (curriculum.css) applied to it. There is a link on the top of the table. However, when loaded in an iframe and linked to an external stylesheet, the ...

htmlcssinternet-explorer

Choosing a group of kids who all share the same element tag

I currently have a situation where I need to display only the first two paragraphs in a div when the page loads, with the remaining paragraphs hidden. I am struggling to achieve this and am seeking guidance on how to do so. In the jsfiddle example provided ...

javascriptjqueryhtmlcss

Having trouble accessing JavaScript Form Elements through Form Variable

For username validation in a form using JavaScript, I'm attempting to access the Label tag within the Form tag. If the Regex matches, then display an error in the Label; otherwise, hide it. However, when I try to modify the text in the text field, I e ...

javascripthtmlcssforms

Loading screen featuring symbol percentage

https://i.sstatic.net/Ksogp.jpg How can I create a loading panel that includes a percentage symbol? I have searched for solutions but most of them suggest using a spinner. However, I specifically need a panel with the % symbol included. Is it possible to ...

javascripthtmlangularjsbootstrap-4

Ensuring CSS tables fill their parent container or overflow as necessary

How can I create a dynamic table with variable-sized columns that always fills the parent area, regardless of the number of cells? The goal is to allow scrolling if needed, but ensure the table spans the entire parent space even with few cells. I've ...

csssass