Плавное перемещение при изменении размера окна браузера между центрированным элементом и абсолютным / фиксированным элементом

Question

У меня есть wrapper, а в wrapper есть header и body, которые расположены по центру по горизонтали.

Справа у меня есть wrapper-right, который зафиксирован в браузере справа.

Когда окно браузера становится меньше (с меньшим разрешением), я хочу, чтобы wrapper-right приблизился к header до минимального расстояния между ними.

Когда минимальное расстояние достигнуто, я хочу, чтобы header изменил размер (стал меньше), но сохранил минимальное расстояние. также я хочу, чтобы заголовок оставался выровненным по левому краю 'body' (теперь он меньше, чем body, центр не в порядке)

В данный момент моя реализация использует медиазапросы (3-4, только 1 в примере), но это не гладко, поэтому я ищу что-то лучшее.

.wrapper{
  background-color:green;
  display: inline-block;
  height: 4rem;
  position: relative;
  width: 100%;
}

.header, body{ 
  max-width: 30rem;
  margin: 0 auto;
}

.header { 
  border:3px solid yellow;
  max-width: 30rem;
  height: 4rem;
  border-left: 5px solid purple;
  }
@media (max-width: 40rem){
   .header{
    max-width: 25rem;
    }
  }


.body{
  background-color:red;
  height: 500px;
  border-left: 5px solid purple;
}
.wrapper-right{
    background: #0069aa;
    height: 4rem;
    width: 5rem;
    position: absolute;
    right: 0;
    top: 0;
}

<div class="wrapper">
  <div class="header">
    <span> header header </span>
  </div>
  <div class="body">
    <span> body body </span>
  </div>
</div>
<div class="wrapper-right"> 
  <span> ipsum ipsum right </span>
</div>

Answer 1

Вы можете установить ширину, равную width: calc(100vw - 10rem - X);, где X - это расстояние, которое вы хотите сохранить (10rem в два раза больше фиксированного элемента), и ваш элемент будет работать так, как ожидается, когда фиксированный элемент получит близко:

.wrapper {
  background-color: green;
  display: inline-block;
  height: 4rem;
  position: relative;
  width: 100%;
}

.header,
body {
  max-width: 30rem;
  margin: 0 auto;
}

.header {
  border: 3px solid yellow;
  max-width: 30rem;
  height: 4rem;
  width: calc(100vw - 10rem - 2rem);
  box-sizing: border-box;
}

.body {
  background-color: red;
  height: 500px;
}

.wrapper-right {
  background: #0069aa;
  height: 4rem;
  width: 5rem;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="wrapper">
  <div class="header">
    <span> header header </span>
  </div>
  <div class="body">
    <span> body body </span>
  </div>
</div>
<div class="wrapper-right">
  <span> ipsum ipsum right </span>
</div>