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

Issues with Html Video ogg Playback

Hey everyone, I'm having some trouble trying to use an OGG video in Firefox while using Meteor. It works fine with MP4 files, but for some reason, I keep getting an error with OGG. Error HTTP “Content-Type” of “text/html” is not supported. ...

htmlfirefoxmeteorvideo

Flickering in CSS transitions on Microsoft Edge

There seems to be a peculiar issue with CSS transitions in Microsoft Edge. The problem arises when there is a transition, such as between hover states, but the styles specified for those states are overridden by other styles in the CSS hierarchy. In such ...

csscss-transitionsmicrosoft-edge

Using jQuery to interact with Twitter Bootstrap modals

By utilizing Bootstrap, we have multiple divs ranging from Button 1 to Button 6. Using jQuery, a modal will pop up with two additional buttons: cancel and confirm. When the confirm button is clicked, the modal will close and the state of the respective bu ...

jquerytwitter-bootstrap

resizing problem with images that adapt to different screen sizes

I've been working on creating a responsive website, but I'm having trouble with the resizing of the two background images I added to the header. When I view the site on a mobile device, the header appears squashed. I think this might be because I ...

htmlcssresponsive-designcss-animations

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

javascripthtmljsonknockout.js

What are the best ways to enhance change detection efficiency in Angular?

One issue I am facing involves two components and a service. It appears that when moving from the view of a routed component to elements in different components like a matMenu and an input field, the routed component seems to refresh itself. This becomes p ...

htmlangulartypescript

Bootstrap 5 does not currently support the use of maxlength and minlength attributes

I've been attempting to set a maxlength and minlength for an input in Bootstrap 5, but it doesn't seem to be working. Can you help me troubleshoot this issue? Here's the code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-c ...

htmlbootstrap-5

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

htmlcss

Is it possible to modify the underline color while using the transition property in CSS?

One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...

csscolorscss-transitionstransition

Interactive menu backdrop determined by div element

I am working on a website with a menu structured like the following: Home -- Work -- Pricing -- Contact Us -- About This website uses a one-page layout and has enabled Scrollspy on Bootstrap. I need to make the active menu background dynamic depending o ...

csstwitter-bootstrap

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

htmlcss

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

javascriptjquerycss

Having trouble loading NEXT JS images when the file path is stored in a variable?

I'm working with Next.js for my coding project and I have a array of images that I need to incorporate into my application. CODE1 <Image src={require("../assets/image1.png")} /> This code snippet works perfectly fine and displays the ...

cssreactjsnext.jsfrontendjsx

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

Explaining the precise measurements of font size in CSS

I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide. While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size deter ...

cssfonts

Placing a logo to the left of a UL list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> & ...

jqueryhtmlcss

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

Tips for overriding bootstrap.css file in mvc asp.net using Visual Studio

I am currently working on creating a website using Mvc asp.net in Visual Studio 2013. I have integrated my css file, 'style.css', into the project, but I am encountering unwanted white spaces and margins around headers and other key elements, eve ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss