Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA!

http://jsfiddle.net/dragontheory/37b8vkoa/1/

html,
body {
  min-height: 100vh;
  /* force footer to bottom of browser */
  height: 100%;
  /*for IE11*/
}

.page-header,
.page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.column01 {
  -webkit-box-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  background-color: rgba(0, 0, 0, 0.1);
}

.column02 {
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row flex-fill no-gutters flex-nowrap">
    <div class="col column01 d-flex flex-column">COLUMN01</div>
    <div class="col column02 d-flex flex-column">COLUMN02</div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>

csslayoutflexboxbootstrap-4

Answer №1

Your specific CSS code is the culprit here: 

 .column02 {
   flex: 0 0 auto;
 }
 .col {
   width: 100%;
 }

This translates to:

  • flex-grow: 0 (disallows element from growing with flex)
  • flex-shrink: 0 (prevents element from shrinking with flex)
  • flex-basis: auto (derives flex-basis from width - set to 100% by .col)

As a result, it restricts the column's width to that of its parent and stops it from reducing, even when the total children's widths exceed the parent's width.

To resolve this issue in your .column02, you can try any of the following:

  • flex-shrink: 1
  • width: auto; flex-grow: 1;
  • flex-basis: 0; flex-grow: 1;
  • flex: 1;

Alternatively, you could simply remove flex: 0 0 auto; (since .col already sets flex-basis: 0; flex-grow: 1; as mentioned above).

Additional Note:

For the resizable panels functionality to work correctly, I suggest enclosing all necessary markup within a single column:

$(function() {
  $(".panel-left").resizable({
    handleSelector: ".splitter",
    resizeHeight: false
  });
})
html,
body {
  min-height: 100vh;
  height: 100%;
}

.page-header,
page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.panel-left {
  flex: 0 0 auto;
  padding: 10px;
  width: 300px;
  min-height: 200px;
  min-width: 210px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 120px;
  cursor: col-resize;
}

.panel-right {
  flex: 1 1 auto;
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row flex-fill no-gutters flex-nowrap">
    <div class="col panel-container">
      <div class="panel-left">
        left panel
      </div>
      <div class="splitter">
      </div>
      <div class="panel-right">
        right panel
      </div>
    </div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>

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

Adjusting the margins of jQuery mobile buttons

I seem to be stuck on a simple error that is causing me to spin my wheels. Take a look at the following jqm (version 1.3) view (in haml) #main-header{'data-role' => 'header'} #main-content{'data-role' => 'content ...

jquerycsshtmljquery-mobilejquery-mobile-button

Tips for Creating Sand Text Effects in CSS (Using Text-Shadow)

I am attempting to create a CSS effect that resembles text written in the sand. Here is an example of what I am trying to achieve: As a newcomer to CSS, I would appreciate any guidance on how to make this effect possible. I have tried using the following ...

htmlcss

Sending emails to multiple groups in Opencart can be easily achieved with the

I am interested in customizing Opencart's admin panel to allow for the selection of multiple customer groups when sending emails. However, I am unsure of where and how to make these modifications as I am relatively new to this type of task. https://i ...

phphtmlcssopencart

CSS selectors duplication can cause confusion and make code harder to maintain. SCSS

If we have style definitions like the following: .a.b { ... } .a.b.c { ... } Is there a method in SASS/SCSS to prevent duplication of the .a.b part? ...

csscss-selectorscompass-sasssass

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the ful ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

Adjusting the position of just a single box in a flexible layout

I have multiple columns set up in a similar way. <div style="display: flex;flex-direction:column"> <main class="main-contents" role="main">TopHeader </main> <div> content A</div> <div> conte ...

htmlcssflexbox

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

javascriptphphtmlmysqlcss

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

css

Embed a Style-sheet into an Iframe (Facebook Like Box)

I'm facing the challenge of customizing a Facebook like box with predefined image sizes and borders that don't align with our design. I want to override some styles to make it more suitable for our website. The Likebox is currently embedded via ...

javascriptjquerycssfacebook-like

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

htmlcssresponsive-design

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

javascriptjqueryhtmlcssangularjs

Is it possible to utilize LESS for CSS customization alongside Bootstrap 4 as the framework of choice?

Currently, I am in the process of transforming designs into responsive HTML and CSS for a project. Bootstrap 4 is my chosen framework and I have decided to include the CSS files rather than the SASS files. The ultimate goal is to integrate these coded pa ...

bootstrap-4sasslessmagento2

Designing a flexible layout that allows for both vertical and horizontal scrolling of content

I have successfully implemented a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content based on resources from various articles and Stack Overflow answers. However, I am facing difficulty in achieving horizontal scrolling for ...

htmlcssflexbox

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Whenever I try to open a modal, then click on a div within the modal in order to close it and open another one, I encounter an issue. The problem is that upon closing the first modal and attempting to display the second one, only the background of the seco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

cssreactjsresponsive-designmaterial-ui