Как правильно выставить пропорции для flex?

Question

[Лариса]

Имеем макет 1080 шириной

<section class="carcass">
    <div class="carcass__left">
          левая часть
    </div>
   <div class="carcass__right">
         правая часть
   </div>
</section>

Как правильно прописать, чтобы при резайзе (сжатие) левая колонка не меняла размер, а сжималась только правая?

.carcass {
  display: flex;
  flex-direction: row;
  &__left {
    flex-basis: 265px;
  }

  &__right {
    flex-basis: 805px;
  }
}

Answer 1

[Николай Шабалин]

Вам нужно сделать так, чтобы левая часть была статичной

.carcass__left {
  flex-basis: 265px;
}

flex-basis - говорит, сколько занимать места до распределения пустого пространства (криво выразился наверное)

а правая тянулась на всё свободное пространство

.carcass__right {
  flex-grow: 1;
}

flex-grow -как раз то свойство, которое заставляет тянуться по основной оси.

Если же вы хотите, чтобы левый блок даже при недостаточном пустом пространстве тоже не сужался, то понадобится flex-shrink

.carcass__left {
  background-color: green;
  flex-basis: 265px;
  flex-shrink: 0;
}

Полный код тут - https://codepen.io/aurfon/pen/odXxPy