Как элемент гибкости сохраняет те же размеры, когда он вынужден к новой строке?

У меня есть гибкий контейнер с 3 детьми. На каждом дочернем элементе max-width и min-width устанавливается так, что при изменении размера экрана я могу заставить их выглядеть прилично без особых усилий.

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-right: -10px;
}

.child{
  flex-grow: 1;
  max-width: 450px;
  min-width: 350px;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  height: 400px;
}
<div class="container">
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
</div>

Ответы

Ответ 1

Возможно, невидимый элемент гибкости в последнем слоте будет работать для вас.

Добавьте этот код в свой CSS:

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
}

DEMO

UPDATE

Я забыл добавить одно правило, которое вызвало небольшое переполнение справа от псевдоэлемента.

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
    margin-right: 10px;        /* to match the other flex items */
}

ПЕРЕСМОТРЕННОЕ ДЕМО

Подробнее в этой связанной записи: Правильное определение и выравнивание элементов (-ей) гибкости в последней строке

Ответ 2

Просто удалите flex-grow: 1; из .child, чтобы решить вашу проблему.

.child{
  max-width: 450px;
  min-width: 350px;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  height: 400px;
}

Рабочая скрипта

Или другое решение:

Используйте flex-basis: 100%; to .child.

Fiddle