Как сделать flex карточки резиновыми (сжимающимися)?

Question

[Norwood]

Есть 3 карточки. Сделал на flex, не ограничивал по минимальной ширине. Хочу, что бы они сжимались, а не сразу же третья карточка слитала вниз. Например, сжались до 200px и после этого был соскок. Можете подсказать, как это сделать?

<div class="select__card-row">
      <div class="select__card-column">
        <div class="select__card-title bg-icon1">Business Growth</div>
        <div class="select__card-text">
          Success scrum project funding marketing seed money
          prototype innovator direct hackathon android angel investor.
        </div>
      </div>
      <div class="select__card-column">
        <div class="select__card-title bg-icon2">Unlimited Revisions</div>
        <div class="select__card-text">
          Technology founders churn rate niche market long tail release iteration burn rate backing. Churn rate accelerator
        </div>
      </div>
      <div class="select__card-column">
        <div class="select__card-title bg-icon3">Ultimate Perfection</div>
        <div class="select__card-text">
          Deployment ownership non-disclosure agreement vesting period crowdfunding success influencer partnership.
        </div>
      </div>
    </div>

.select__card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 -38px;
  }
  
  .select__card-column {
    flex: 0 0 33.333%;
    max-width: 322px;
    padding: 10px 38px;
  }

  .select__card-title {
    font-weight: 500;
    font-size: 1.2rem;
    color: #272727;
    max-width: 149px;
    padding: 0 0 42px 65px;
  }

  .bg-icon1 {
    background: 0 0 no-repeat url("/assets/img/select/select1.png");
  }

  .bg-icon2 {
    background: 0 0 no-repeat url("/assets/img/select/select2.png");
  }

  .bg-icon3 {
    background: 0 0 no-repeat url("/assets/img/select/select3.png");
  }

  .select__card-text {
    color: $colorGrayLight;
    line-height: calc(27 / 15 * 100%);
    font-size: 1rem;
  }

Answer 1

[Ankhena]

Имеет смысл почитать про box-sizing.
Дело в том, что 3х33.333% + 3х2х38 никак не влезает в 100%. Вот они и переносятся.
На большой ширине начинает помещаться просто за счет того, что вы ограничили ширину 322px.

Comments

[Norwood]

Спасибо! Просто забыл про это свойство.
А можно уточнить про отрицательные margin. Правильно ли я их использую?

[Ankhena]

Norwood, современные браузеры понимают column-gap для флексов.
Если в ТЗ есть динозавры, то придется продолжать использовать отрицательные margin.
https://caniuse.com/?search=column-gap

[Norwood]

Ankhena, спасибо. Видимо, column-gap- это свойство из гридов. Тз нету. Это я для себя пробую что-то новое.

[Ankhena]

Norwood, column-gap это древнее свойство из css columns.

[Norwood]

а :not(:last-child)? Его же тут можно использовать?

[Ankhena]

Norwood, можно, но не долго, пока все 3 помещаются в один ряд.

Answer 2

[Danny Arty]

Для .select__card-row вместо flex-wrap: wrap; задайте
flex-wrap: nowrap;

upd.
Задайте для

.select__card-column {
min-width: 200px;
box-sizing: border-box;
}

Comments

[Norwood]

В таком случае они не будут переноситься вообще.
Наверное, не корректно сформулировал вопрос.
Я хочу управлять сжатием. Например, что бы они сжались до 200px, а потом перенеслись.

[Danny Arty]

Norwood, обновил ответ