Expanding div fills remaining space with scrollable content (Utilizing Bootstrap 4 Flexbox grid)

My code was running smoothly before I enabled flexbox support in Bootstrap 4 Alpha 3:

Check out the working jsfiddle here

However, once flexbox support was enabled, I hit a roadblock. I'm looking for a solution using Bootstrap 4 built-in Flexbox grid system features, that would be ideal!

Here's the non-working jsfiddle

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

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

css

.wrapper {
  height: 20rem;
  display: flex;      /* if remove this, the style will be correct, but won't scroll */
  flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
}

.header {
  background: tomato;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
}
htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

To achieve the same result in Bootstrap 4 with flex enabled, a simple adjustment to your CSS can be made: In Bootstrap 4, the default properties of the well-known class .row are altered to:

.row {
    display: flex;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    flex-wrap: wrap;
}

This is why your layout may not have appeared as expected. To revert back to the previous setup, you just need to modify its CSS like this:

CSS

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}
.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.row:before, 
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}

You can view the updated code on JSFiddle

Answer №2

After being inspired by @vivekkupadhyay, here is another method: simply include display: block; in the header and footer.

Check out this jsfiddle for reference

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: occupy remaining space and allow scrolling<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

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

css

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}

.header {
  background: tomato;
  display: block;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
  display: block;
}

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

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

javascriptphphtmlajax

An error occurs when attempting to echo empty values from an array due to the "undefined index" issue being

Answering this question seems quite straightforward. Let me outline what needs to be done. I possess an array $polarity_array The array holds values in the form of HTML tags that present images. However, there are some empty values in the array because ...

phphtmlarrays

The Chrome Keyboard on Android seamlessly passes words to the next input field when the focus changes in JavaScript

When using two input fields, pressing the enter key on the first field in Chrome (49) on Android (6.0.1) carries over the last word typed to the new input due to the right-bottom button on the standard keyboard. Is there a way to prevent this behavior or a ...

javascriptandroidhtmlgoogle-chrome

The e.currentTarget attribute in Material UI buttons is a key element that

I am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...

javascripthtmlreactjsreduxmaterial-ui

Stop unnecessary re-rendering of controlled React inputs

Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...

htmlreactjs

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

javascriptcssreactjsreact-native

PHP - contact form is live for just 2 hours daily

Hello, this is my first time here and I could really use some assistance. Please bear with me as English is not my strong suit compared to most people here, but I'll do my best to explain my query. So, I have a PHP script for a contact form on my web ...

javascriptphphtml

Tips for changing the CSS properties of input elements in iView

Exploring Vue's single file components and experimenting with the iView UI framework. Here is a snippet of code I am working with: <template> <div> <i-input class="cred"/> </div> </template> I want to adjust the ...

cssvue.jsiview-ui

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

I have a basic webpage that showcases various products stored in the database. My goal is to implement an updater feature where, if a user adds a new product, the page will automatically display the latest addition in a specific div. I attempted to refere ...

phpjavascripthtmlajax

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs

Creating a table row dynamically by populating it with data. However, encountering an issue with retrieving the data by their respective id. if(xmlhttp.status == 200) { var adminList = xmlhttp.responseJ ...

javascriptjqueryhtmlajaxweb

Encountering issues with implementing bootstrap-datepicker on cloned rows, as the values remain locked to the first date field

Encountered an issue with cloning rows using bootstrap-datepicker and bootstrap. To reproduce the problem: 1. Select a date in the first input field (id_form-0-expense_date_item). 2. Add another row and select a date in the second input field, which shoul ...

jquerytwitter-bootstrapbootstrap-datepicker

Tips on resizing images within a container to maintain aspect ratio

I am trying to create a layout with a flex container containing 2 divs - one with an image that floats left, and the other with some paragraphs floating right. How can I make sure that the image scales alongside the paragraphs while maintaining its aspect ...

htmlcss

Adjust the size of the text and save it in a cookie for later use

I am in need of a script that can dynamically increase and decrease the font size on a website while retaining the user's chosen setting even after they return to the site. I believe utilizing cookies is the way to achieve this functionality. Despite ...

javascriptjquerycssfont-size

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

html displaying dynamic data in a table

As a beginner in coding, I am attempting to create a dynamic table. The first column is working fine with each new cell being added to the top. However, when I try to add columns, they fill from top to bottom instead of mirroring the first column. I want m ...

javascripthtml

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

jqueryhtmlcss

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

htmlcss

Trouble Loading HTML Template Post Email Dispatch in Django

In my Django project, I have set up functionality to send an email after a form submission using the smtplib module. The email is sent successfully, but for some reason, I'm encountering an issue where the corresponding HTML template (delivery_email_s ...

javascriptpythonhtmldjangoform-submit

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser