Overflow issues with CSS FlexBoxLayout

I am currently working on creating a website using Bootstrap and CSS's flexbox. My goal is to create a list that fits the height of the screen without overflowing it.

After some trial and error, I managed to come up with a solution that looks like this:

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  background-color: black;
}

.wrapper .content-wrapper .content {
  flex: 1 1 1px;
}

.wrapper .content-wrapper .content {
  display: flex;
  flex-direction: column;
}

.wrapper .content-wrapper {
  width: 100%;
}

.wrapper {
  display: flex;
  height: 100%;
}

.side {
  background-color: blue;
  display: flex;
  flex-direction: column;
  width: 224px;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 100px;
  background-color: aqua;
}

.main {
  flex: 1 1 1px;
  background-color: pink;
  overflow-y: scroll;
}

.item {
  background-color: white;
  border-style: solid;
  height: 200px;
}
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="wrapper">
    <div class="side"></div>
    <div class="content-wrapper">
      <div class="content">
        <div class="topbar"></div>
        <div class="main">
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

After consulting this resource: Prevent flex item from exceeding parent height and make scroll bar work

When trying to expand the main div into 2 more columns (using bootstrap + flex), I encountered an issue where the item list overflows below the screen's bottom:

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  background-color: black;
}

.wrapper .content-wrapper .content {
  flex: 1 1 1px;
}

.wrapper .content-wrapper .content {
  display: flex;
  flex-direction: column;
}

.wrapper .content-wrapper {
  width: 100%;
}

.wrapper {
  display: flex;
  height: 100%;
}

.side {
  background-color: blue;
  display: flex;
  flex-direction: column;
  width: 224px;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 100px;
  background-color: aqua;
}

.main {
  flex: 1 1 1px;
  background-color: pink;
  display: flex;
}

.header {
  background-color: yellow;
  overflow-y: scroll;
  height: 100%;
}

.details {
  background-color: crimson;
}

.item {
  background-color: white;
  border-style: solid;
  height: 200px;
}
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="wrapper">
    <div class="side"></div>
    <div class="content-wrapper">
      <div class="content">
        <div class="topbar"></div>
        <div class="main">
          <div class="header col-lg-4">
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
          </div>
          <div class="details col-lg-8"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

The issue is evident in the absence of the bottom scroll bar arrow. I would appreciate any assistance in resolving this matter.

htmlcssbootstrap-4flexboxoverflow

Answer №1

Your code contains fixed lengths in the form of:

.side {
  width: 224px;
}

.topbar {
  height: 100px;
}

By utilizing fixed lengths, it becomes easier to tackle overflow issues. The presence of a fixed length is essential to trigger a scrollbar when an overflow condition arises.

Specifically, the .topbar { height: 100px } plays a crucial role in generating a scrollbar for the adjacent element.

(Ensure to deactivate flex-shrink for these lengths to maintain their consistency.)

The following code snippet is an enhanced version of your original code, incorporating optimizations for improved performance and efficiency:

body {
  margin: 0;
  background-color: black;
}

.wrapper {
  display: flex;
  height: 100vh;
}

.side {
  /* width: 224px; */ /* Requires `flex-shrink: 0` for respect */
  flex: 0 0 224px;    /* Newly defined; includes flex-grow, flex-shrink, flex-basis */
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;  /* Utilizes leftover space */
  display: flex;
  flex-direction: column;
}

.wrapper .content-wrapper .content {
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: 0 0 100px;
  /* height: 100px; */
  background-color: aqua;
}

.main {
  height: calc(100vh - 100px); /* Sets the overflow condition */
  background-color: pink;
  display: flex;
}

.header {
  background-color: yellow;
  overflow-y: scroll;
  /* height: 100%; */
}

.details {
  background-color: crimson;
}

.item {
  background-color: white;
  border-style: solid;
  height: 200px;  /* Doesn't require flex-shrink deactivation as it's not a flex item */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="side"></div>
  <div class="content-wrapper">
    <div class="content">
      <div class="topbar"></div>
      <div class="main">
        <div class="header col-lg-4">
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
          <div class="item">item</div>
        </div>
        <div class="details col-lg-8"></div>
      </div>
    </div>
  </div>
</div>

Explore the jsFiddle demonstration

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

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

htmlcss

Is it feasible to utilize the translate function twice on a single element?

Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encounter ...

javascripthtmlcsscss-transforms

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

javascripthtmlcssvue.jsvue-router

Video from YouTube keeps playing in the background even after closing Bootstrap modal

I'm having trouble with playing an embedded YouTube video inside a Bootstrap modal. When I close the modal, the video continues to play in the background. Can someone help me with this issue? <!-- Button trigger modal --> <button type=&q ...

htmljquerybootstrap-5

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

cssreactjsmaterial-ui

How come my Bootstrap container columns are not remaining evenly divided into four parts?

Struggling to split a section of my project into 4 equal parts using the bootstrap col attribute. Unfortunately, every time I try, the last container ends up breaking and shifting below the other 3, creating an unsightly code layout. index.html <sec ...

htmlcssbootstrap-5

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

javascripthtmlreactjsreact-hooksuse-state

What is the best method to store the name of an image as a session variable?

<!--images acting as buttons--> <form> <img src="peanuts.jpg"" class="qac left" onclick="qac_search()" name="Peanuts"> <img src="milk.jpg" class="qac" onclick=&qu ...

phphtmlvariablesbuttonsession-variables

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

How can I create a responsive input group with automatic width using Bootstrap 3.1?

I am having trouble with the layout of my two floating divs. The first div contains buttons and the second div contains an input-group. However, the input-group is moving down a line instead of utilizing the available space. Here is a link for reference: ...

htmlcsstwitter-bootstrap

Testing the local transmission of form data via Javascript: A Step-by-Step guide

Currently studying how to send forms using JavaScript by manually creating an XMLHttpRequest. Towards the end of the provided example, there's a note: Note: If you want to send data to a third party website, keep in mind that this use of XMLHttpRequ ...

javascripthtmlformsxmlhttprequest

Ionic - encountering crashes with ion-nav-view on emulator

I am encountering an issue with ion-nav-view. Whenever I try to use it, the emulator displays a black screen, but it works perfectly fine in ionic serve. I suspect it may be a syntax error causing this problem. Interestingly, when I create a blank projec ...

javascripthtmlcssangularjsionic-framework

The custom styles in Material-Table are taking precedence over all other styling, including Material UI styles, and causing icons to not

I recently started using the Material-Table component for a project I'm working on, and it's been great for managing tables with features like adding, editing, deleting, and searching rows. However, I've run into a few issues that I need hel ...

cssreactjsiconsmaterial-uimaterial-table

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

Make toggleClass show up smoothly without disappearing

I'm currently working with jQuery's toggleClass() method and I want to achieve a fade-in effect without the corresponding fade-out animation. Using the "duration" attribute applies the same duration for both actions, which is not what I want. I w ...

javascriptjqueryhtmlcss

What is causing the label's color to remain the same?

Once the page has loaded, the label color (which reads "enter your name") is supposed to change to red. However, despite the script being in place, the color remains unchanged. What could be the reason for this? SCRIPT window.onload = initiateScript; fu ...

javascripthtmlcssforms

How to display logged-in user information on the homepage

Code for multiuser login $scope.users = [ {uname: 'fida', password: 'fida', age:26, department:"science"}, {uname: 'anu', password: 'anu', age:23,department:"maths"}, {uname: 'nida&apo ...

htmlangularjs

Modifying Class Background Image with AngularJS

I have a class called "tp-cont" that is loaded from a separate .css file. I was able to update the background image using jQuery with the following code. HTML: <li ng-click="changeTemplateBackgroundImage()"></li> Controller: $scope.changeTe ...

htmlangularjs