CSS exclude element from overflow

Question

At the moment I wasn't able to exclude the content-2 to outside the sticky content, without duplicating the element class format.

As you can notice in the following full-screen fiddle would result in:

.superlongcontent {
  height: 1000px;
  background-color: red;
}

.sticky {
  height: 300px;
  position: sticky;
  top: 0rem;
  height: calc(100vh - 20rem);
  overflow-y: auto;
  background-color: blue;
}

.content-1 {
  height: 600px;
  background-color: yellow;
}

.content-2 {
  height: 50px;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">

</div>

<div class="col-lg-3 col-md-12 col-12 sticky">
  <div class="content-1"></div>
  <div class="content-2 outsidesticky"></div>
</div>

Despite what I want to achieve which is placing the content-2 ( green box ) right below the sticky overflow content. Resulting:

If I duplicate the sticky using the same format it won't be that good at the moment:

.superlongcontent {
  height: 1000px;
  background-color: red;
}

.sticky {
  height: 300px;
  position: sticky;
  top: 0rem;
  height: calc(100vh - 20rem);
  overflow-y: auto;
  background-color: blue;
}

.content-1 {
  height: 600px;
  background-color: yellow;
}

.content-2 {
  height: 50px;
  background-color: green;
}

.sticky2 {
  height: 50px;
  position: sticky;
  top: 0rem;
  background-color: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">

</div>

<div class="col-lg-3 col-md-12 col-12 sticky">
  <div class="content-1"></div>
</div>

<div class="col-lg-3 col-md-12 col-12 sticky2">
  <div class="content-2 outsidesticky"></div>
</div>

If possible I don't want to duplicate the class like my current attempt:

<div class="col-lg-3 col-md-12 col-12 sticky">
  <div class="content-1"></div>
</div>

<div class="col-lg-3 col-md-12 col-12 sticky2">
  <div class="content-2 outsidesticky"></div>
</div>

Are there any better ways to achieve the same result?

Soothran · Accepted Answer · 2019-08-23 09:21:15Z

1

Hope this solves your issue.

.superlongcontent {
  height: 1000px;
  background-color: red;
}

.wrapper {
  height: 300px;
  position: relative;
  top: 0rem;
  height: calc(100vh - 20rem);
  overflow-y: auto;
  background-color: blue;
}

.content-1 {
  height: 600px;
  background-color: yellow;
  /*Below css is for demo purpose only - to show the 'end' text*/
  display: flex;
  align-items: flex-end;
}

.content-2 {
  
  height: 50px;
  background-color: green;
}

.this-is-sticky {
  position: sticky;
  bottom: 0;
  width: 100%;
  left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">

</div>

<div class="col-lg-3 col-md-12 col-12 wrapper">
  <div class="content-1">
    <span>END</span>
  </div>
  <div class="content-2 this-is-sticky"></div>
</div>

answered Aug 23, 2019 at 9:21

Soothran

1,2536 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shinjo Over a year ago

Thanks for the reply. Let me try in my project first. Is there any other way other than changing to relative wrapper?

Collectives™ on Stack Overflow

CSS exclude element from overflow

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related