Question 183386 in CSS Question posted in
Some basic documentation can be found here.

How to make children take up all available space in a container with overflow in CSS?

I have a container with two children, a header and a content. I want both children to take up all available space in the container, even if the content in content overflows and causes a scroll. Additionally, I want the header and content backgrounds to extend over all available space.

Here’s the HTML and CSS code that I’ve tried:

<div class="container">
  <div class="header">
    <span>header1</span>
    <span>header2</span>
  </div>
  <div class="content">
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  </div>
</div>

<style>
  .container { 
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 500px;
    border: 1px solid black;
  }

  .header {
    background: red;
    display: flex;
    justify-content: space-between; 
  }

  .content {
    background: green; 
  } 
</style>

However, the header doesn’t take up all available space in width and header2 is visible even though it should be hidden by the overflow scroll. Additionally, the header and content backgrounds don’t extend over all available space.

How can I make both children take up all available space, even with overflow, and make the backgrounds extend over all available space?

Thank you in advance for your help!

https://jsfiddle.net/r2m1ne53/3/

Tags:

2

Answers


  1. 0

    You could do it with an extra wrapper and a few other tweaks:

    .container {
  overflow: auto;
  max-width:500px;
  border: 1px solid black;
}

.wrap {
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header {
  background: red;
  display: flex;
  justify-content: space-between;
}

.content {
  background: green;
} 
    <div class="container">
<div class="wrap">
  <div class="header">
<span>header1</span>
<span>header2</span>
  </div>
  <div class="content">
 contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  </div>
</div>
</div>
    Login or Signup to reply.
  2. 0

    You can set .container { display: grid; }:

    .container {
  display: grid;
  overflow: auto;
  width: 500px;
  border: 1px solid black;
}

.header {
  background: red;
  display: flex;
  justify-content: space-between; 
}

.content {
  background: green; 
} 
    <div class="container">
  <div class="header">
    <span>header1</span>
    <span>header2</span>
  </div>
  <div class="content">
     contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search