When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

I have two files, one HTML and one CSS. The HTML file contains the following code:

<div class="app">
   <div class="header"></div>
   <div class="main">
       <div class="container_1">
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
                ..
       </div>
       <div class="container_2"></div>
   </div>
</div>

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
}

.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.header{
    width: 100%;
    min-height: 50px;
    background-color: rgb(255, 235, 147);
}

.main{
    display: flex;
    width: 100%;
    height: 100%;
}

.container_1{
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 100%;
    background-color: rgb(255, 147, 147);
    overflow-y: auto;
}

.container_2{
    width: 200px;
    height: 100%;
    background-color: rgb(147, 147, 255);
}

This layout can be viewed here: page with header

If I remove the div element with the header class, the extra scrolling bars disappear, which is my desired outcome: page without header

I am seeking a way to eliminate the unnecessary horizontal and vertical scrolling bars (excluding the vertical scrollbar within the container_1 class) without removing the div that contains the header class.

htmlcss

Answer №1

display:grid is the ideal choice for implementing this layout rather than using flexbox:

html, body{
    margin: 0;
    padding: 0;
}

body{
    width: 100vw;
    height: 100vh;
}

.app{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 200px 200px auto;
    height: 100%;
}

.header{
    min-height: 50px;
    background-color: rgb(255, 235, 147);
    grid-column: 1 / span 3;
}

.main {
    display:contents;
}

.container_1{
    background-color: rgb(255, 147, 147);
    overflow-y:auto;
}

.container_2{
    background-color: rgb(147, 147, 255);
}
<div class="app">
   <div class="header"></div>
   <div class="main">
       <div class="container_1">
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           ...
       </div>
       <div class="container_2"></div>
   </div>
</div>

Answer №2

When I tested this on a Mac, it worked perfectly without any issues. My suggestion would be to experiment with using the overflow: hidden property on your elements.

You might want to consider applying overflow: hidden to your body element and observe how that impacts the layout.
Additionally, remember that we also have overflow-y and overflow-x properties which can be quite handy for styling.

https://i.sstatic.net/YLDy8.png

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

Setting a custom background image in HTML using the designated file PATH

My current issue involves the inability to set my background photo using a CSS file. I am utilizing NetBeans for this project. Inside a folder named css, there is a file called global.css which contains the following code: body{ background-image: url ...

htmlcssimage

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...

phphtmlvalidationif-statement

How can we nest a div within the outermost parent element?

Consider a scenario where there are 3 different divs named grandParent, Parent, and Child. Although the parent's tag is placed inside the grandParent, due to the use of position: absolute; property, the parent ends up being displayed outside the grand ...

javascripthtmlcss

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

javascriptjqueryhtmlcss

A structured HTML table featuring a secure header and stable left-hand columns, complete with knockout controls embedded in both the header and first

I'm facing a challenge with a customizable HTML table: Each row has a checkbox (knockout bound) to allow the user to determine if it should be included or not. The header columns also have checkboxes (knockout bound) to indicate if a particular ...

htmlknockout.jshtml-tablesticky

Instructions on transforming a XAML grid in WPF into a JSON array

Currently, I am utilizing a XAML WPF grid in my project and I am looking to transform the structure of the grid into JSON format. Do you have any suggestions or ideas on how this can be achieved? For reference, here is an example: <GridBinding> ...

c#jsonwpfhtmlxaml

Footer that is adhered to the bottom of the page with a

Can a sticky footer with a transparent background be achieved without a content background (.wrapper) underneath it? I found this resource: ...

htmlcssfootersticky

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

javascriptphpjqueryhtmlajax

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

cssreactjsjsxnext.js

Increasing the div's size to exceed the dimensions of the screen

My issue pertains to the background image on my website. I have set a background image for the body and centered it horizontally. Each page includes a paragraph below the header, each with a different size, causing scrolling. The problem is that the backgr ...

htmlcss

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

I've set up my HTML form with the following structure: <div class="container"> <div class="form-group" ng-controller="studentController"> <form role="form" class="well form-horizontal" id="registerForm" name="forms.register ...

javascripthtmlangularjslocal-storageangular-local-storage

Adjusting the desktop view through media queries for mobile devices

As someone with no coding experience, I've been working on my portfolio using Cargo. Currently, I'm trying to adjust the mobile view of an article on my homepage through media queries. However, the code is unintentionally changing the layout on d ...

cssresponsive-designmedia-queries

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Hello, I am working on creating a customized dropdown list similar to the one shown in the image. https://i.sstatic.net/saeCd.png My goal is to have a select list with options that display both an image and the country name. However, my current code is n ...

phphtmlcss

The NgbTooltip does not activate when hovering over a <td> cell

I'm currently facing an issue with implementing ngbTooltip on <table> elements. Initially, I had trouble with <th>, but that was resolved by using the container attribute after referring to this helpful post. The main challenge arises ...

htmlangularbootstrap-4ng-bootstrap

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

htmlcssinternet-explorerradio-button

Unable to assign a basic HTML class to a Blazor component

Upon attempting to implement the following code in my .NET 5 Blazor project within a .razor file: <SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd /> I encountered an issue where Blazor interpreted the class attribute as ...

htmlrazorblazor

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

javascriptjqueryhtml

What steps can be taken to automatically set a button in a navigation bar to active when its corresponding route is clicked on?

I'm trying to implement a feature in my react app where an SVG button in the navbar changes color when its route is active or switches colors based on which button's route was selected. For example, clicking on the settings button would change it ...

cssreactjsnavbar