Use Bootstrap 4 to create a scrollable list-group that can be displayed in a row using flexbox, all while allowing the list to scroll independently

Currently, I am utilizing Bootstrap 4, specifically alpha-6 version.

Here's the scenario I'm dealing with:

<body>

  <!-- A div is automatically generated within a randomly assigned ID and class -->

  <div class="bigone">

    <div class="container-fluid">

      <div class="header">
        My header
      </div>

    </div>

    <div class="mybar">
      Navigation bar
    </div>

    <div class="main">
      <div class="container-fluid">
        <div class="row">

          <div class="col-6">
            <div class="card">
              <div class="card-header">
                Card Header
              </div>
              <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>                    
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

                <a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
              </div>
              <div class="card-footer">
                Card Footer
              </div>
            </div>
          </div>

          <div class="col-6">
            <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br>
            <h1>LAST LINE</h1>
          </div>

        </div>
      </div>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

  <!-- Closing previously mentioned div -->

</body>

The following is the css code snippet:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

Feel free to check out the DEMO on plnkr: https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

To ensure that footer stays at the bottom when the page content is empty, I have set: .bigone { height: 100vh; } and utilized Bootstrap Flexbox align utilities like: 

<div class="bigone d-flex flex-column">

Now, my aim is to make both the list-group in card and the col-6 section containing "so many words" scrollable, so their heights extend up to the bottom where the footer is located.

In essence, I do not want the main BODY to have a scrollbar present.

Note that the heights of my header and footer are subject to change and are not fixed values.

How can this be achieved? As I am not an expert in using flexbox properties.

I should note that compatibility with Internet Explorer is not necessary, Chrome support is sufficient.

IMPORTANT:

I am unable to fix the height of my card by employing something similar to the following:

height: calc(100vh - header.height - footer.height - etc...);

This limitation arises from the dynamic nature of changing heights for elements such as header, footer, etc.

Visual representation of the issue:

https://i.sstatic.net/usXrx.jpg

csstwitter-bootstraptwitter-bootstrap-3flexboxbootstrap-4

Answer №1

As per the guidelines provided in the specification, setting flex: 1 (on the .main element) is essentially the same as flex: 1 1 0, which is shorthand for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

Despite this, it seems that flex: 1 is not functioning as expected within your codebase. (I've exclusively checked on Chrome as mentioned in your query).

However, should you apply the entire shorthand to .main - transforming it into a flex container and including overflow - the layout appears to function correctly.

.main {
    flex: 1 1 0; /* Even though 'flex: 1' was used previously, it does not yield the intended results */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

revised plunkr

Source of information:

UPDATE (in response to modifications in the question)

The previous solution eliminates scrollbars from the body while incorporating a vertical scrollbar for the .main section.

To enable vertical scroll bars for each column within the .main section, implement the following changes:

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

revised plunkr

Answer №2

After encountering an issue,

<div class="fixed-top collapse show content-wrapper">
 <ul class="list-group bg-white navigation-menu">
 </ul>
</div>

I successfully resolved it by

.content-wrapper {
    margin-top: 48px; /* ensuring it is under the navbar */
    height: 100vh;
    overflow: scroll;
    padding-bottom: 48px; /* adjusting for the top margin */
}

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

What causes the empty output when implementing Bootstrap?

Just getting started with Bootstrap and I've created a navbar using the following code: <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">ASiDesigner</a> <button cla ...

bootstrap-4

What is the method to restrict the coverage of the background color within a specific region in HTML?

I am still fairly new to html so I apologize if this is a very basic question for you. Here is the css file that is causing me trouble: .sidepanel-list{ margin-left: 10px; background-color:lightgray; Whenever I run the code, the background color s ...

htmlcss

Exploring the wonders of Bootstrap 3 panels and stylish floating images

Is it possible to create a responsive design using Bootstrap 3 panel along with a floating image positioned next to it? I want the panel to seamlessly fit into the available space, without overlapping the image. Can anyone provide guidance on achieving thi ...

htmlcsstwitter-bootstrap-3

Eliminate the flickering effect on the dropdown menu

Is there a way to eliminate the annoying 'flicker' effect on my menu? Whenever I click on 'Dropdown 1', I notice that Test 1 and Test 2 flicker. My assumption is that this is due to my use of the !important declaration. Any suggestion ...

javascriptjqueryhtmlcss

Error in animation of the navigation bar icon strip

After successfully adding an animated icon bar to my bootstrap4 navbar, I noticed a small issue. When clicking on the burger icon, the X appears on the left side of the screen instead of the right where the burger icon is located. Click here for a demonst ...

htmlcssbootstrap-4hamburger-menu

Odd gap beside Bootstrap5 navbar that needs fixing

While working on a layout featuring a left-sided nav-bar menu, I encountered an odd blank space between the navbar and the main content area. Can anyone shed light on why this space appears and how to eliminate it? For reference, here is the code snippet: ...

javascripthtmlcssbootstrap-5

Insert more text following the existing content

Is it feasible to include text using pseudo-elements ::after or ::before to a specific word? For example, I am interested in placing a PDF icon consistently beside the word "Download". [PDF] Download Alternatively, are there other methods available? ...

csspseudo-element

How to solve z-index issues with two absolutely positioned divs in IE6

Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...

htmlcss

Adapt the stylesheet for mobile devices using CSS

I am struggling with updating file paths in CSS depending on whether the end user is accessing my site from a PC or mobile device. Below is my CSS code, where I attempted to redirect users if they are on a handheld device: <link rel="stylesheet" type=" ...

javascriptjqueryhtmlcssmobile

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

Creating a Three by Three Grid with HTML and CSS

I have a total of 20 elements to display in a grid view. However, I specifically want a 3x3 grid view, where only 9 elements will be visible in the view window. The remaining elements should be placed on the right side of the window in a scrollable manner. ...

javascripthtmlcssreactjs

Difficulty with positioning two divs side by side in HTML/CSS?

Hey there, I'm facing some strange CSS issues while trying to achieve a specific layout. I want to have a warning icon on the right side of each input field, which are horizontally centered: https://i.sstatic.net/IY3xp.png Currently, I have managed ...

htmlcss

Issues with the display of Bootstrap modal may occur when clicking an <a> tag

Attempting to open a modal by clicking on an <a> tag to display it centered vertically. However, upon clicking, the modal fails to appear at the center with the proper backdrop. In header.blade.php <div> <a class="header-text" href="#" ...

javascriptphphtmltwitter-bootstrapbootstrap-4

Height setting for flex column layout

.flex-body { display: flex; flex-wrap: wrap; } .flex-body div{ width: 50%; align-items: flex-start; } <div class="flex-body"> <div style="background: #0980cc; height:100px;"></div> <div style="background: #09cc69;height: 20 ...

cssflexbox

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

Looking for assistance on how to automatically close the sidebar or pull navigation menu after clicking on a menu item

My website is designed to be responsive and includes a navigation slider that is hidden off-screen by default. The slider features a vertical push/pull bar that remains visible for users to access the menu. The entire navigation slider is fixed on the page ...

javascriptjqueryhtmlcss

CSS: flexible side panels with stationary center

I am looking for a specific layout that consists of three columns: left, content, and right. The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the ...

layoutcss

Link causing chaos in CSS animation

I've created a CSS animated banner. You can view the result here. However, I'm facing an issue where adding a hyperlink to some of the pictures is causing the animation to mess up. The first picture has a href attribute, making it smaller and not ...

cssimageanimationhref

Use HTML elements within HTML code incorporating different functions and CSS styles

I have a web page that consists of a header bar and a navigation bar. I would like to have these elements appear on all the subpages of my website without having to recreate them each time. To achieve this, I have added the following code inside the inde ...

phphtmlcssfunctioninclude

How to position two divs in a row using Bootstrap

Looking at the output below: https://i.stack.imgur.com/pQM8F.png The blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly. Here's th ...

htmlcsstwitter-bootstrap-3