What is the reason for overflow-y: auto not generating a scrollbar?

I'm currently working on a web project that utilizes CSS Flexbox. I am trying to create a layout with a fixed left sidebar and a scrollable right side. I have added overflow-y: auto to the right side content to enable scrolling, but unfortunately, it's not working as expected.

In the CSS, I have used overflow-y: hidden for the body and overflow-y: auto for the right side content.

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.outside {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-basis: auto;
}

.sidebar {
  flex: 1;
  list-style: none;
  text-decoration: none;
  left: 0;
  width: 20%;
  height: 100vh;
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-basis: auto;
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  overflow-y: auto;
  padding: 2%;
  flex: 1 16%;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}
<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class="sidebar">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    ...
    Add product cards here as needed
    ...
  </div>
</div>

I would appreciate any assistance in resolving this issue. Thank you.

htmlcssflexboxresponsive-designoverflow

Answer №1

Your code has a lot of unnecessary duplication and rules that could be simplified.

For example, there is no need to apply the .sidebar declaration to both a div and its child ul, which can be counterproductive.

I have optimized the code by removing fixed positioning and unnecessary overflow: hidden on the body element.

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box; /* new */
}

.outside {
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: nowrap;  */
  /* flex-basis: auto;  */
  height: 100vh; /* new */
}

.sidebar {
  flex: 1;
  /* list-style: none; */
  text-decoration: none;
  /* left: 0; */
  /* width: 20%; */
  /* height: 100vh; */
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  /* flex: 1; */
  display: flex;
  flex-wrap: wrap;
  flex-basis: 80%; /* adjustment */
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  /* overflow-y: auto; */
  padding: 2%;
  /* flex: 1 16%; */
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}
<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class=""><!-- remove duplicate class -->
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <!-- More product cards -->

  </div>
</div>>

Answer №2

To enable scrolling on the right side, consider adding position: fixed to your left navigation bar and removing overflow-y: hidden from the body. Another issue you may encounter is at a screen width of 680px with your navigation bar. To address this, utilize media queries to ensure full responsiveness.

However, on desktop, it seems like you have achieved the desired layout.

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

    body {
        font-family: 'Nunito Sans', sans-serif;
        /* Removed overflow-y hidden here */
    }

    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }

    .outside {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex-basis: auto;
        
    }

    .sidebar {
        flex: 1;
        list-style: none;
        text-decoration: none;
        left: 0;
        position: fixed; /* Added position: fixed */
        width: 20%;
        height: 100vh;
        background-color: #666666;
    }

    .sidebar header {
        font-size: 1.7rem;
        color: white;
        text-align: center;
        line-height: 5rem;
        background-color: #777777;
        user-select: none;
    }

    .sidebar ul a {
        height: 100%;
        width: 100%;
        line-height: 4rem;
        font-size: 1.2rem;
        color: white;
        padding-left: 2rem;
        text-decoration: none;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(255,255,255,.2);
    }

    ul li:hover a {
        font-weight: bold;
    }

    .products {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-basis: auto;
        overflow-y: auto;
        overflow-x: auto;
    }

    .product-card {
        display: flex;
        min-width: 6rem;
        flex-direction: column;
        overflow-y: auto;
        
        padding: 2%;
        flex: 1 16%;

        background-color: #FFF;
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
    }

    .product-image img {
        width: 100%;
    }

    .product-info {
        margin-top: auto;
        padding-top: 20px;
        text-align: center;
    }

    h5 {
        font-weight: 500;
        line-height: 1.7em;
    }

    h6 {
        color: #666;
        font-size: 14px;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Apalog</title>
            <link rel="stylesheet" href="Style/main.css">
            <script src=""></script>
        </head>
        <body>
    
            <div class="outside">
                <div class="sidebar">
                    <header>Apalog</header>
                    <ul class="sidebar">
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">My Catalog</a></li>
                        <li><a href="#">Full Catalog</a></li>
                    </ul>
                </div>
                <div class="products">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
                    (Additional product cards removed for brevity)
                </div>
            </div>
        </body>
    </html>

Additionally, ensure to correct the last image within your products div.

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

Is it possible to relocate an iframe outside the body of a post in Blogger?

For my blog posts, I have a goal of relocating the first iframe used outside of the post body and into a custom div called #myvideos. Some blog templates, such as this example, have already achieved this by moving a video out of the post body. I would like ...

jquerycssiframeblogger

Ways to retrieve the content of a text box within a cell

Here is the code snippet I am currently working with: <tr val='question'> <td> <input style='width: 500px' type='text' placeholder='Q.Enter your question here for radio button? '> </ ...

javascriptjqueryhtml

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss

the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening. .table th:first-child, ...

javascripthtmlcss

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

htmlangulartypescript

The issue with the Bootstrap 5 navbar in an Angular project is that it expands properly but fails to close when

I am currently working on developing a Single Page Application using Angular 12 and Bootstrap 5. As part of this project, I have created a shared navbar component. The issue I am facing is that when the navbar transitions to the hamburger menu button for ...

htmlangulartwitter-bootstrapbootstrap-5

Script to Trigger Download Button

I'm having trouble with a rar file download on my website (ravens-hangar.tk). A bunch of lines of script keep popping up. Can anyone help me out? Thanks in advance! .download { width: 120px; height: 30px; font-size: 20px; text-align: center ...

htmlcssfiledownload

Struggling to display the inline navbar

For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem. The crux of the ...

cssruby-on-railshtml

Uh oh! AngularJS just threw an error: Uncaught TypeError - angular.service is not a function. It happened in taskService.js

I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...

javascripthtmlangularjsangular-module

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

javascriptjqueryhtmlcss

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss

The Scottish flag isn't displaying on my website, but all other Emoji 5 symbols are working perfectly

When I build my website with PHP, I include header('Content-Type:text/html; charset=utf-8'); at the start. Interestingly, the Scottish flag emoji ...

phphtmlemoji

Activate the popup for sharing or bookmarking by clicking on a regular link

I am currently utilizing a Share/Bookmark script: <div class="singles-right"> <a href="#" class="bookmark"></a> <script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script> <a href="#" clas ...

javascripthtml

A guide on implementing CSS and Styling in a React component

Struggling to style my React.js file that was converted from a standard web page. I have the original CSS but unsure how to use React for proper styling. Any assistance is welcomed! var NavBar = React.createClass({ render: function() { return ( ...

htmlcssreactjs

How do I input text into a Google Doc using an XPATH or element that is difficult to manipulate?

I'm currently working on a Python code that is designed to automatically open a Google Doc and input a specific set of combinations for a predetermined length. While I've successfully created the code to navigate to my Google Docs and open a new ...

pythonhtmlpython-3.xseleniumxpath

How can I align a button in the center using Bootstrap 4?

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p> ...

csstwitter-bootstrapbootstrap-4

I attempted to pull information from the database and display it in my checkboxes. However, I encountered an issue where I am unable to save the selected checkboxes back to the database

This code snippet is written in Blade for a reservation form: <div class="col-lg-6"> <div class="contact-form"> <form id="contact" action="{{url('/reservatio ...

phphtmllaravelwebcheckbox

Is PHP the best choice for creating simple websites?

Throughout my web design experience, I have always relied on PHP for the most basic tasks and avoided using the .html extension. One of the main reasons for this was my ability to utilize "PHP Includes" on my website, allowing me to create navigation eleme ...

phpjqueryhtmladobe-edge

Adjusting Column Order in Bootstrap 4 for Responsive Screen Sizes

For my website, I envision having a layout where, on medium-sized screens and larger, there is a phone on the right side and text on the left. However, if the screen size is smaller than medium, I would like the text to move below the phone. <section i ...

htmlbootstrap-4

Is object equality compromised when using track by with ngOptions in AngularJS 1.4 migration?

Seeking assistance to clarify an issue that arose after transitioning from Angular 1.3 to Angular 1.4. I have prepared a JSFiddle demo to showcase this problem. Explanation In my controller, there are two instances of MyElement in a list that a user can ...

javascripthtmlangularjsng-optionsangularjs-ng-model