How to have fixed position of element but relative to container

Question

I have a container with 2 buttons on the left and right, and text in the middle. I want the text to scroll while the 2 buttons stay fixed to the bottom of the container, like in the image below.

But i want the scroll to be on the outer container. Have attached the html and css code below.

Also, when the lines are less than the height of the container, the buttons should still stick to the bottom of the container..

Please help.

PS: Both markup and css can be changed.

.container {
  width: 400px;
  height:200px;
  border: 1px solid;
  position:relative;
  overflow:auto;
  margin-bottom:4rem;
}

.line {
  height:8px;
  width:100%;
  background-color: grey;
  border-radius: 8px;
  margin-bottom:20px;
}

.text{
  padding: 5px 50px;
}

.button-wrapper{
    position: absolute;
    bottom: 4px;
}

.button{
  width:32px;
  height:32px;
  background-color:orange;
}

.left {
  left:4px;
}

.right{
  right:4px;
}

<div class="container">
   <div class="button-wrapper left">
    <div class="button "></div>
   </div>
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper right">
    <div class="button "></div>
   </div>
 </div>

Answer 1

Here is idea using CSS grid and position:sticky where you can keep your markup

.container {
  width: 400px;
  height:200px;
  border: 1px solid;
  overflow:auto;
  display:grid;
  grid-template-columns:auto 1fr auto; /* 3 columns */
  margin-bottom:4rem;
}

.line {
  height:8px;
  background-color: grey;
  border-radius: 8px;
  margin-bottom:20px;
}

.text{
  padding: 5px 50px;
}

.button-wrapper{
   position:sticky;
   bottom:5px; 
   margin: auto 5px 5px; /* auto will push the element to the bottom*/
}

.button{
  width:32px;
  height:32px;
  background-color:orange;
}

<div class="container">
   <div class="button-wrapper">
    <div class="button "></div>
   </div>
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper ">
    <div class="button "></div>
   </div>
 </div>
 
 <div class="container">
   <div class="button-wrapper">
    <div class="button "></div>
   </div>
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper ">
    <div class="button "></div>
   </div>
 </div>

Answer 2

Wrapping your content inside a div and modifying the css worked for me. Working example

.container {
  width: 400px;
  height: 200px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  margin-bottom: 4rem;
}

.line {
  height: 8px;
  width: 100%;
  background-color: grey;
  border-radius: 8px;
  margin-bottom: 20px;
}

.text {
  max-height: 190px;
  overflow: auto;
  position: relative;
}

.content-div {
  width: 334px;
  margin: 0 auto;
}

.button {
  width: 32px;
  height: 32px;
  background-color: orange;
  display: inline-block;
  position: absolute;
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

<div class="container">
  <div class="text">
    <div class="content-div">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
  <div class="button-wrapper">
    <div class="button left"></div>
    <div class="button right"></div>
  </div>
</div>

Answer 3

If you are allowed to change your markup, here is a solution:

Put the two buttons in a wrapper:

   <div class="button-wrapper">
    <div class="button left"></div>   
    <div class="button right"></div>
   </div>

Add position: sticky to your .button-wrapper

.container {
  width: 400px;
  height:200px;
  border: 1px solid;
  position:relative;
  overflow:auto;
  margin-bottom:4rem;
}

.line {
  height:8px;
  width:100%;
  background-color: grey;
  border-radius: 8px;
  margin-bottom:20px;
}

.text{
  padding: 5px 50px;
}

.button-wrapper{
    position: sticky;
    bottom: 4px;
}
.button-wrapper:after {
  content:'';
  display: table;
  clear: both;
  height: 0;
}

.button{
  width:32px;
  height:32px;
  background-color:orange;
}

.left {
  float: left;
  margin-left: 4px;
}

.right{
  float: right;
  margin-right: 4px;
}

<div class="container">
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper">
    <div class="button left"></div>   
    <div class="button right"></div>
   </div>
 </div>