Работа с flex, flex-shrink, flex-basis

Question

Мне необходимо реализовать такую вещь:

Есть один блок в определённой шириной и другой блок, который растягивается на всю оставшуюся ширину. Для них указаны минимальные ширины. Необходимо сделать так, чтобы при достижении блоками своих минимальных ширин происходил перенос путём flex-wrap. Но пытаясь мною это реализовать оно не работает, как мною было задумано.

   .container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }
   .block1 {
      flex: 1 1 auto;
      min-width: 500px;
      background: red;
   }
   .block2 {
      flex: 0 1 300px;
      min-width: 200px;
      margin: 0 0 0 50px;
      background: green;
   }

<div class="container">
   <div class="block1">Блок 1</div>
   <div class="block2">Блок 2</div>
</div>

Answer 1

Немного поменял значения ширины блоков, чтобы в примере было видно при изменении окна браузера.

   .container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }
   .block1 {
     flex: 1 1 auto;
      width: 200px;
      background: red;
   }
   .block2 {
      flex: 1 1 300px;
      margin: 0;
      background: green;
   }

<div class="container">
   <div class="block1">Блок 1</div>
   <div class="block2">Блок 2</div>
</div>

БЛОГ НА HUSL

Работа с flex, flex-shrink, flex-basis

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