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;
}

user_7100628 · Answer

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

Put the two buttons in a wrapper:

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;
}

user_12522543 · Answer

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;
}

user_8620333 · Answer

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;
}

How to have fixed position of element but relative to container

3 Answers