Выдвиньте панель из вида браузера при изменении размера или в определенном разрешении

Question

Здесь, при меньших разрешениях, когда панель B или Panel-A переключается (показать / скрыть), она не отталкивает Panel-A от экрана без горизонтальной прокрутки .

Аналогично, Panel-C или Panel-B видны одновременно.

Аналогично, Panel-C не толкает Panel-A вправо при малых разрешениях.

Как вставить div между Panel-B за пределами экрана (только той части, которая требуется), когда соответствующая Panel-A или Panel-B переключается на меньшие разрешения, чтобы Panel-C или Panel-B могли использовать свои минимальные значения.ширина и правильно видимый.

Когда панель-c или панель-b видна (любой из них должен быть виден одновременно), тогда панель-A должна толкаться влево или вправо, соответственно, когдаразрешение низкое:

 Panel-C            Panel- A              Panel-B

<div style="display:flex;width:100%;">
  <div style="display:flex;width:100%;justify-content:center;">
    <div style="min-width:300px;max-width:500px;margin-right:30px;display:none;">
      Panel C
    </div>
    <div style="min-width:520px;max-width:668px;">
      Panel A
    </div>
    <div style="min-width:300px;max-width:500px;margin-left:30px;display:block;">
      Panel B
    </div>
  </div>
</div>

Answer 1

Я нашел вопрос особенно смущающим, но, читая из заголовка, я думаю, что вы ищете, это решение для изменения стиля элементов в зависимости от размера (разрешения) области просмотра.Это может быть достигнуто с помощью медиазапросов .

. Вот пример, основанный на вашем коде, но с CSS, извлеченным в его собственный файл и упрощенным для краткости:

div {
  box-sizing: border-box;
  border: 1px solid red;
}

.container {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  width: 100%;
  justify-content: center;
}

.pan {
  min-width: 100px;
  max-width: 200px;
}

@media (max-width: 300px) {
  .pan__b {
    display: none;
  }
}

@media (max-width: 400px) {
  .pan__c {
    display: none;
  }
}

<div class="container">
  <div class="group">
    <div class="pan pan__a">
      Panel A
    </div>
    <div class="pan pan__b">
      Panel B
    </div>
    <div class="pan pan__c">
      Panel C
    </div>
  </div>
</div>

Дайте мне знать, если это то, что вы намереваетесь, или я неправильно понял.