Как установить фиксированное положение элемента относительно контейнера

Question

У меня есть контейнер с 2 кнопками слева и справа и текстом посередине. Я хочу, чтобы текст прокручивался, в то время как 2 кнопки остаются зафиксированными на дне контейнера, как на рисунке ниже.

Но я хочу, чтобы свиток был на внешнем контейнере. Прикрепите код html и css ниже.

Кроме того, когда линии меньше высоты контейнера, кнопки должны прилипать к нижней части контейнера.

Пожалуйста, помогите.

PS: можно изменить разметку и css.

.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

Если вам разрешено изменять разметку , вот решение:

Поместите две кнопки в оболочку:

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

Добавить position: sticky на ваш .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>

Answer 2

Завершение вашего контента в div и изменение css работали для меня. Рабочий пример

.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

Вот идея с использованием CSS сетки и position:sticky, где вы можете сохранить свою разметку

.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>