Непонятное пустое место в flex сетке. Как убрать?

Question

[Иван Табакерка]

Появилось неожиданное пустое место при адаптивной вёрстке блоков.

.news_board
  display: flex
  flex-wrap: wrap
.news_elem
  flex: 1 1 calc(50% - 30px)
  height: 200px
  margin: 5px

<div class="news_board">
          <div class="news_elem"></div>
          <div class="news_elem"></div>
          <div class="news_elem"></div>
          <div class="news_elem"></div>
          <div class="news_elem"></div>
          <div class="news_elem"></div>
        </div>

Answer 1

[Sergey]

В песочнице ваш код работает нормально. Отступа нету. Скорее всего это у вас другими стилями добавляется отступ, которых нет в приведенном коде

Comments

[Иван Табакерка]

Действительно

[Иван Табакерка]

Тут проблема в родительских блоках. Рядом с news_board стоит ещё один флексбокс и когда в нём текста слишком много, он растягивает news_board, а за ним и карточки тянутся. Не знаете как их "развести"?

[Sergey]

Иван Табакерка, не понял что вы спрашиваете. где news_board? на картинках flex1 и flex2 и везде "новости". Что куда растягивается? Оформите ваш код на codepen.io чтобы было видно ошибку. Если я правильно понимаю, скорее всего там надо stretch добавить или ... в общем нужна песочница

[Иван Табакерка]

Firsov36, https://codepen.io/ivantabakerka/pen/WNvyKRw