Как сделать селекты в два столбца, но без flex-wrap?

Question

Нужно, чтобы селекты не врапались при уменьшении экрана, а сжимались, как это возможно сделать? Врап установил для того, чтобы селекты были в два столбца(скрин)

.rating-filter
{
    display: flex;
    flex-wrap: wrap;
}
.column:first-child select
{
    width: 391px;
    height: 70px;
    border-radius: 20px 0px 0px 20px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}
.column:nth-child(2) select
{
    width: 859px;
    height: 70px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}
.column:nth-child(3) select
{
    width: 389px;
    height: 70px;
    border-radius: 0px 20px 0px 0px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}
.column:nth-child(4) p
{
    color: var(--2-black, #2C2A3B);
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.column:nth-child(5) input
{
    margin-left: 23px;
    width: 796px;
    height: 66px;
    border-radius: 0px 0px 0px 20px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}
.column:nth-child(6) select
{
    width: 695px;
    height: 70px;
    border-radius: 0px 0px 20px 0px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}

      <div class="rating-filter">
        <div class="column">
          <select class="select">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </div>
        <div class="column">
          <select>
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
          </select>
        </div>
        <div class="column">
          <select>
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
          </select>
        </div>
        <div class="column">
          <p>Фильтровать:</p>
        </div>
        <div class="column">
          <input type="text" placeholder="текст">
        </div>
        <div class="column">
          <select>
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
          </select>
        </div>
      </div>

Answer 1

Вместо фиксированой ширины прописать динамическую.

.column:first-child select
{
    width: Значение;
    height: 70px;
    border-radius: 20px 0px 0px 20px;
    border: 1px solid var(--gray, #777C86);
    background: rgba(255, 255, 255, 0.20);
}

a) Если отталкиваешься от ширины экрана используй vw или dvw б) Если от родителя то %. в) Если надо сохранять ширину на какой то части то использукй calc

К примеру родитель имеет ширину 1000px надо оставить левому блоку ширину в 100px а 2 и 3 равные значяение то. Стиль 1 блока

width:100px

2 и 3

width:calc(50% - 50px)

Калк((100%\ на количенство динамических блоков) = 50% - (ширина статического блока\ деленная на количенство динамических блоков) = 50%

так же используй min-width и max-width

Answer 2

Что то у Вас со стилями сложно было так что лишнее я убрал. Надеюсь суть группировки понятна.

p{
  margin: 0;
}

.rating-filter
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rating-filter .group {
    display: flex;    
    flex: 1;
    gap: 5px;
}

.rating-filter .group select {
    flex: 1;
}

<div class="rating-filter">
      <div class="group">
        <select class="select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <select>
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </select>
        <select>
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </select>
      </div>
      <div class="group">
        <p>Фильтровать:</p>
        <input type="text" placeholder="текст" />
        <select>
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </select>
      </div>
    </div>

БЛОГ НА HUSL

Как сделать селекты в два столбца, но без flex-wrap?

Ответы (2 шт):