Fixed Position <div> Extends Beyond Bottom of Page

Question

I have a <div> which is basically a shopping cart which I want to have fixed to the right as the user scrolls through content. I'm using Bootstrap and have this...

<div id="my_order" class="well order_panel affix">
  stuff
</div>

The problem is that if .stuff gets tall, the height of <div id="my_order"> gets to the point where the bottom of it is off the bottom of the page of the browser window. Like this...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-8">some stuff</div>
<div id="my_order" class="col-md-4 well order_panel affix">
      begin
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      I can't see this!!!
    </div>
</div>

Is there a way to fix this?

Answer 1

Here's an example using max-height:100vh. I've removed the wrapping .row as it adds extra padding to the parent div which causes the horizontal scrollbar, which hides the last line of text beneath.

.wrap{
position:relative;
padding:0;
margin:0;
}

.order_panel{
  position:fixed;
  right:0;
  top:0;
  max-height:100vh;
  overflow-y:auto;
  box-sizing:border-box;
  z-index:10;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="col-md-8">some stuff</div>
  <div id="my_order" class="col-md-4 well order_panel affix">
      begin
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      I can't see this!!!
  </div>
</div>