Блог

 .topbarContainer {
  height: 50px;
  background-color: var(--main-color);
  border-bottom: 2px solid rgb(235, 80, 106);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  z-index: 999;
  overflow-x: hidden;
}
 

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

Значение по умолчанию flex для любого гибкого контейнера flex: 0 1 auto означает, что все элементы будут уменьшаться, чтобы соответствовать контейнеру, но не будут превышать заданного размера (в данном случае 50 пикселей). Вы хотите иметь flex-shrink значение 0, так что для краткости это будет flex: 0 0 auto .