CODEWITHSUNDEEP
css
fseixas
fseixas

Reputation: 75

Positioning divs inside wrapper, one of them must have y-scrollbar when content overflows

I'm trying to accomplish the following layout, but I'm having trouble with the description box height definition. I'm trying to avoid javascript.

Diagram

Right now I have both the wrapper and the title bar working as they should, the title and description divs being nested inside the wrapper div:

#wrapper{
   position: fixed;
   right: 0;
   width: calc(100vw - 1.51 * 95vh - 5vh);
   top: calc(40px + 2.5vh + 2.5vh);
   height: calc(100vh - 40px - 40px);
}

#title{
   width: 100%;
   height: auto;
   top: calc(2.5vh + 40px + 2.5vh + 5vh);
}

What about the description div? Can anyone point me in the right direction?

Thanks!

Upvotes: 0

Views: 34

Answers (1)

Paulie_D
Paulie_D

Reputation: 115047

Flexbox can do that.

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: lightblue;
}

.content {
  flex: 1;
  overflow-y: auto;
  background: orange;
}

.spacer {
  height: 2000px;
  /* for demo purposes */
}
<div class="container">
  <header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur magnam labore laboriosam dolores, fugit ipsum quibusdam, aperiam totam itaque soluta debitis cumque provident repudiandae.</header>
  <div class="content">
    <div class="spacer"></div>
  </div>
</div>

Upvotes: 1

Related Questions