Решение для фиксированного положения и автоматической высоты

Question

Вот похожий пример того, как выглядит мой код. Таким образом, это работает нормально. Но я не хочу определять высоту: 500 пикселей для div .all-content, потому что этот div будет иметь разную высоту, в зависимости от того, сколько сообщений / текста я туда поместил.

ps. на фиксированном div у меня есть вкладки, которые имеют разную высоту, в зависимости от того, сколько сообщений будет внутри

Если я удалю height: 500px ;, position: fixed не работает / не прокручивается.

Итак, я думаю, мне нужно jQuery о высоте на div .all-content

.all-content {
  width: 100%;
  transform: translateY(0);
  height:500px;
}

.content {
  margin-top: 40px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.fixed-position {
  position: fixed;
  right: 0;
  margin-right: 100px;
  top:10%;
}

<div class="all-content">
     <div class="content" style="display: flex";>
          
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
         
        <div class="tab-tab fixed-position">
            FIXED
        </div>
        
      </div>
</div>

Answer 1

Из того, что я могу понять из вашего вопроса, цель состоит в том, чтобы «фиксированный» div оставался фиксированным относительно «всего содержимого», поэтому были внесены изменения для относительного положения. Простое удаление преобразования и добавление относительной позиции даст вам результат. Надеюсь, это то, что требовалось.

.all-content {
  width: 100%;
  position:relative;
}

.content {
  margin-top: 40px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.fixed-position {
  position: fixed;
  right: 0;
  margin-right: 100px;
  top:calc( 40px + 10%);
}

<div class="all-content">
     <div class="content" style="display: flex";>
          
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br><br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <br>
          txttxttxttxttxttxttxt
          txttxttxttxttxttxttxt
          <be>
         
        <div class="tab-tab fixed-position">
            FIXED
        </div>
        
      </div>
</div>