Display the scrollbar within a flexitem by utilizing flexbox styling

I am currently setting up my HTML website with Bootstrap flex and I have a specific layout in mind. I want the inner div to have scrollbars while the outer div fills up the rest of the page.

Take a look at this example:

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
        <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson;" class="overflow-auto">
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
    </div>
</div>
<div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>

Currently, the layout is functioning correctly, but the scrollbar is attached to the "filler" div instead of the "scroller" div. How can I resolve this issue?

htmltwitter-bootstrapcssflexbox

Answer №1

To ensure that the div with id scroller displays properly, a height must be specified.

I have added a height of 100px and set overflow:auto; in the inline style

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:100px;" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>
  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>

Answer №2

Make sure to switch to Full screen mode if you are using a smaller device, and consider implementing media queries.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<style>
#wrap{}
#wrap > div{ height:50px;}
#scroller{}
#wrap #filler { height:calc(100% - 50px * 7)}
</style>
<body>
<div class="d-flex align-items-start flex-column" style="height: 100vh;" id="wrap">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2">
    <div style="background-color: darkcyan; height:50px;">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:calc(100% - 50px);" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>

  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
</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

The spinner persists even after the fetch api call

The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...

javascripthtmldom

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

Animating the height with jQuery can result in the background color being overlooked

For those curious about the issue, check out the JSFiddle. There seems to be an anomaly where the background of the <ul> element disappears after the animation on the second click. Oddly enough, even though Firebug shows that the CSS style is being a ...

jqueryhtmlcssjquery-animate

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

There is no need for updates as git is already current for some mysterious reason

As a newcomer to git, I've been trying to wrap my head around it but still struggling. Can someone help clarify this for me? My question pertains to the 'master' branch in git which contains the following code: const list = [ 'h&ap ...

javascripthtmlgitgithubconsole.log

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ <head> <meta charset=" ...

htmlcssfont-awesome

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs

Maintain selected values in a dropdown list that is generated dynamically

I am currently revamping an outdated webpage that pulls data from a database. My main objective is to implement the functionality to let users narrow down their search by selecting certain values. To achieve this, I have developed a dynamic dropdown list ...

phphtml

Creating a banner image that scrolls while maintaining a fixed size

I'm looking to add a banner image with a scrolling effect as users navigate down the page, but I'm not sure what this technique is called. An example of what I'm trying to achieve can be seen on this site. As the user scrolls down, the res ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transitioning background color on hover using HTML and CSS styling techniques

My goal is to change the background color of an element when the cursor hovers over it. Oddly enough, the transition is successful for altering the font size but not for the background color. Here is my CSS code: .ul01 a,p{ height: 100%; display: ...

htmlcss

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...

jqueryajaxhtmlflowplayer

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...

htmlcss

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

htmlcssmargin

Protecting against overflow for text inside a container that changes when hovered over

There is text displayed on top of an image within a div container that functions as a link. <a href="https://link.com" style="color:white"> <div class="thumbnail"> <img src="image.jpg" clas ...

htmlcsshoveroverflowtransform

Multi-object retrieval feature in Material Dialog

I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...

javascripthtmlmaterial-designmaterial-ui

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml