Achieving a height of 100% within an overflowing parent element

Welcome everyone!

I am facing an issue with a container that has two divs and a parent element with overflow height. The left div has a fixed height: 200px while the right div is set to height: 100%. However, the right div does not expand to accommodate all the content. Can anyone suggest a solution?

I am using SCSS for this. If there is an alternative approach to resolve this issue, please provide your suggestions.

.main{
  display: flex;
  background: #09f;
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
}

.left{
  background: #ef5523;
  min-height: 200px; //height size for example
}

.right{
  width: 100%;
  height: 100%;
  background: #99ff99;
}
<div class="main">
  <div class="left">Left List</div>
  <div class="right">Right List</div>
</div>

csssass

Answer №1

To achieve this, you may need to modify the HTML code.

.main{
  background: #09f;
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
}

.overflow {
  height: 200px;
  display: flex;
}

.left{
  background: #ef5523;
}

.right
  background: #99ff99;
}
<div class="main">
  <div class="overflow">
    <div class="left">Left List</div>
    <div class="right">Right List</div>
  </div>
</div>

Answer №2

One way to achieve this layout is by using CSS grid:

.main{
  display: grid;
  grid-template-columns:auto 1fr;
  background: #09f;
  max-height: 100px;
  overflow-y: scroll;
}

.left{
  background: #ef5523;
  height: 200px;
}

.right{
  background: #99ff99;
}
<div class="main">
  <div class="left">Left List</div>
  <div class="right">Right List</div>
</div>

Answer №3

.main{
  display: flex;
  background: #09f;
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
}

.left{
  background: #ef5523;
  height: 200px;
}

.right{
  background: #99ff99;
  flex-grow: 1;
}
<div class="main">
  <div class="left">Left List</div>
  <div class="right">Right List</div>
</div>
Strong text example 1

When using flex, utilize the flex-grow property for the second div instead of specifying 100% width. This will allow it to take up the remaining space within the container without needing a specific width declaration.

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

Utilizing CSS3 transformation perspective on a div element when the window has finished loading

Greetings everyone. I've been experimenting with CSS3 perspective, and I'm encountering an issue where it only shows up while the window is loading. Here's a fiddle ._red{ background-color:#f00; display:block; width:100px; ...

jquerycss

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

cssreactjsmaterial-ui

Enhance your AngularJS table with a custom Javascript context menu!

In the process of developing a shift planner, I have implemented a JS context menu and am attempting to display the shifts using Angular. However, upon clicking any table cell, all cells are being updated simultaneously. Is there a workaround for this issu ...

javascriptjqueryhtmlcssangularjs

Using script tags incorrectly (JavaScript platform game)

Currently, I am working on the 'create a platform game' project as outlined in Eloquent JavaScript, and I have encountered an issue related to script tags. As per the instructions in the book, we are advised to showcase our level using: <lin ...

javascripthtmlcss

Links are unable to function properly outside of the carousel slideshow in Chrome

www.encyclopediasindhiana.org/index2.php I successfully implemented a slideshow using mycarousel with the help of PHP. However, I am facing an issue where the hyperlinks on the left side of the carousel are not working if the image is as large as the heig ...

phphtmlcsstwitter-bootstrapcarousel

Switch the class of a div using jQuery when it is clicked

I need to implement functionality where 4 different links change the class of a specific div when clicked. For example, clicking on link 1 will change the class to s1, link 2 to s2, and so on. Below is some code that I have been working on, however, I am ...

jqueryhtmlcssclass

Automatically resize and vertically align a centrally positioned div in a designated container

I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. I ...

htmlcss

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

javascriptjqueryhtmlcss

What is the best way to horizontally align a floated image with its text positioned at the bottom?

I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner. Below is the HTML5 ...

htmlcss

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

Tips for showcasing the complete image within v-parallax

For my project, I decided to go with vuetify as the frontend framework. It's a great choice! Now, I have a question about v-parallax - how can I make it display the full image without cropping? Below is some code snippet, and you can find the full cod ...

cssvue.jsvuetify.js

What method can I use to ensure that the sidebar stays fixed at a particular div as the user continues to scroll down the

Is there a way to automatically fix the sidebar once the user scrolls down and hits the top of the .Section2? Currently, I have to manually enter a threshold number which can be problematic due to varying positions across browsers and systems. Fiddle htt ...

javascriptjqueryhtmlcss

Relative fluid icon within the parent element

Looking at my JSFiddle example, I have two buttons with icons that currently have fixed width and height set. How can I make these icon sizes relative to the parent element using percentages, such as 80%? Current fixed width and height of icons: .gc_foot ...

css

"Angular Ionic combination for displaying lists with customized headers and footers on cards

My issue is fairly straightforward - I am looking to create a list card with item array from my controller. However, I am struggling with how to structure my data in the HTML. The list card should have a header, content, and footer. I have attempted variou ...

javascripthtmlcssangularjsionic-framework

Creating a uniform mobile version for all smartphones on a website

My website, www.sauleezy.altervista.org, is experiencing an issue that I have been unable to resolve. I have set up two different .css files for desktop (style.css) and mobile (handheld.css). In my index file, I included the following code: <meta name= ...

javascripthtmlcss

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment: After deploying to ...

javascripthtmlcssdjangoyui-pure-css

Choose from a variety of options for color schemes and hover effects

Looking to create a selector where users can pick a color. I tried changing the background color for each option, but when hovering over them, the background turns blue - which is not what I want. Check out the pictures for clarification: https://i.sstatic ...

htmlcssangularbootstrap-4

"Merging the vibrancy of RGB with the subtlety of

Currently exploring methods to blend an RGB color with a grayscale one. This is for a gradient generator that leverages preset colors and a template (predefined style properties for various vendors) in order to craft a CSS3 gradient. I am certain there is ...

phpcsscolorsgradientgrayscale

What is the best way to include an active CSS class in a menu item?

Link to example Can you figure out why the Home button is not turning red in this code snippet? .navbar a:hover, .navbar a:focus, .navbar a:active { color: red !important; } <nav class="navbar navbar-expand-lg"> <div class="collapse navbar ...

htmlcsstwitter-bootstrap

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

htmlcssangularangular-material