Пустое пространство между flex элементами?

при использовании свойства flex-wrap: wrap; между элементами появляется пустое пространство. Необходимо сверстать так, чтобы блоки вплотную прижимались друг к другу, но при этом красный блок был на всю ширину, а синий имел заданную ширину, но растягивался на всю оставшуюся высоту. В чем моя ошибка?
<body>
   <div class="wrapper">
       <div class="b1">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptate ipsum eligendi quas nihil necessitatibus unde fugit. Ea amet, cumque.
       </div>
       <div class="b2">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores expedita vel recusandae cupiditate voluptatum autem sit, neque placeat consectetur, beatae.
       </div>
   </div>
</body>

.wrapper {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.b1{
    height: 90px;
    background: red;
    flex-basis: 100%;
}

.b2{
    width: 300px;
    background: blue;
}

341f55b395ce41fe958835e4bc9ad6e1.jpg
  • Вопрос задан
  • 1400 просмотров
Решения вопроса 1
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Xserber
@Xserber
Full-stack developer. React.js, AngularJS + NodeJS
Воспроизвести не удаётся, сразу нормально. (пустого пространства нет)
Растянуть .b2 допишите display: flex , flex: auto ему. Он растяниться.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы