Tips on making scrollable content within a static div element

I am currently working on designing a shopping cart layout for a website that allows users to order food from a restaurant. I want the shopping cart to remain fixed on the screen, but be scrollable when there is an overflow of items being added.

This is a basic representation of the code I am using to achieve this functionality.

My goal is to set a relative position within a fixed position div and make the cart scrollable when needed.

I have been attempting to solve this issue for hours with no success. 

.wrapper {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 200px;
}

.sidebar {
  position: relative;
  height: 100%
}

.cart {
  overflow-y: auto;
}
<div class='wrapper'>
  <div class='sidebar'>
    <div class='cart'>
      <div class='item'>
        [Lorem Ipsum content here]
      </div>
    </div>
  </div>
</div>

htmlcsscss-position

Answer №1

To make this work, add the following .item to your style and set the height accordingly. 

  .wrapper {
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
      position: fixed;
      width: 200px;
    }

    .sidebar {
      position: relative;
      height: 100%
    }

    .cart {
      overflow-y: auto;
    }
    .item{
     overflow-y: auto;
     height:200px;
    }

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

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

csswordpressadvanced-custom-fields

Issues with Angular.js controller functionality

I am currently in the process of learning Angular and have been following the Intro to Angular videos provided on the official Angular website. However, I seem to be encountering an issue with my code that I can't quite figure out. The error message I ...

javascripthtmlangularjsangularjs-controllerangularjs-module

Struggling to align list-items in a horizontal manner

I'm having trouble aligning the list-items in my horizontal navbar. Can anyone assist me in identifying the error? Below is the HTML code, which has a complex structure due to the use of the Wordpress thesis theme and Cufon for font replacement: < ...

csscss-floatinline

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

In Groovy (or Java), learn the techniques to properly escape double quotes within HTML inner text while leaving attributes untouched

I am currently utilizing an HTML rendering engine that is based on Groovy within a Web Content Management (WCM) system. I have encountered a scenario where the user inputs rich text content into a form based on TinyMCE, which appears as follows: <p> ...

javahtmlgroovyhtml-entities

What are the best practices for utilizing *ngIf?

In my Angular project, I am facing a challenge with using *ngIf. My app.component.html file handles both the login page and the dashboard. I want to hide the dashboard until the user logs in. To achieve this, I decided to use *ngIf. Here is how I implement ...

javascripthtmlangulartypescript

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Currently, I am working with a map that includes a kmllayer. This layer has been added using the following code: ctaLayer = new google.maps.KmlLayer('http://www.npd.no/engelsk/cwi/pbl/en/aFactGlobe/disc/ActivityStatus_Producing_labels.kml'); ...

javascripthtmlkml

Positioning an individual element to the right side of the navigation bar in Bootstrap 5

I've been attempting to shift a single nav-item to the right side of the navbar, but I'm having trouble. My navbar is fairly basic, without a search tool or dropdown menu, as seen below: <nav class="navbar navbar-expand-lg bg-body-tertiar ...

htmlcssresponsive-designnavbarbootstrap-5

PHP code $this->item->link within an anchor tag is not functioning properly and is displaying JObject->link instead

Hey, can you help with this quick question? It's driving me crazy! I have a PHP file where I'm pulling in different items like contact details. One of these items is $this->item->link, which displays a perfect URL. All I want to do is make ...

phphtmlweb

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

The "else" statement is never being executed

Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input in ...

javascripthtmlcss

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

javascriptjqueryhtmlangularjscss

What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS. #videowall-grid{ width:700px; border:1px dotted #dddddd; display: none; margin: 5px auto; padding: 5px; } #videowall-grid .square{ padding: 5px; margin: 5px; bo ...

htmlcss

I need to extract information from the source code of a different website - how can I do this

Is it possible to extract content from the source code of another website and display it on our own site? For example, imagine a scenario where a site contains the following source code: <table ...> <tr> <td class ...

htmlcopy

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

htmlcssreactjs

"Learn the process of customizing the border color of a drop-down menu using

Is there a way to add validation to a drop-down menu so that the border color turns red if an option is not selected? $("#MainContent_ddlSuppliers option:selected'").css("border", "1px solid #F78181"); ...

jquerycssdrop-down-menucolors

Using Django and jQuery to retrieve a file and display a prompt for downloading the file in the browser

Previously, I had a question about passing files to the browser for download, which was easily achieved by passing strings created at the end of a function to an iframe's src attribute. Now, I have a more complex task at hand – I need to pass pre-e ...

jquerypythonhtmldjango

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

javascripthtmlvue.js

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

What could be causing the shadowbox not to display in Internet Explorer?

I am currently working on fixing a shadowbox issue in Internet Explorer. The page where the shadowbox is located can be found at this link: Here is the HTML code: <div class="hero-image"> <a href="m/abc-gardening-australia-caroli ...

javascriptjqueryhtmlcssshadowbox