Flex: Как убрать правый отступ, когда элемент последний в строке?

Question

[Посторонним В.]

https://jsfiddle.net/1471djg7/3/

Есть 2 элемента, изначально на одной строке. Они соотносятся как 77% и 21%, у первого - правый отступ 2% (в сумме 100). Когда второму элементу в строке не хватает места для отображения контента, он переносится на новую строку, заполняя её полностью, при этом первый элемент заполняет строку, в которой остался сам. Но есть одна проблемка: правый отступ в 2% у первого элемента всё равно остался, а мне нужно, чтобы все элементы были по ширине контейнера.

Кажется, нужно какое-то шаманство с grow/shrink и max/min width. Как это реализовать?

Comments

[Ankhena]

так https://jsfiddle.net/g3nbLk5x/
Про перенос не поняла, что вы имели в виду без flex-wrap ничего никуда не перенесется.
И justify пишется не так, как у вас, пользуйтесь emmet

[Посторонним В.]

Ankhena, поправил уже justify, то старая версия. flex-wrap у меня и был включен.
ПОдвиньте границу окна вправо и увидите, что перед переносом на новую строку элементы вплотную прижимаются друг к другу - это плохо, я для борьбы с этим маргин и поставил.

[Ankhena]

Посторонним В., я же убрала в примере и flex-grow: 1

[Ankhena]

Посторонним В., разумнее в media написать, чтобы раньше переносились.

[yadren]

Если использовать justify-content: space-between, то маргин справа не нужен, элементы раскидаются по краям. При столкновении отработает flex wrap.

[Посторонним В.]

yadren, flex-wrap работает после того, как элементы уже схлопнулись, а мне это не нужно - между ними всегда должен быть промежуток.

Answer 1

[dsemagin]

@media only screen and (max-width : 992px)
{
.one {
  margin-right: 0;
}
}

ширину укажи при которой нужно отрубить марджин

Comments

[Посторонним В.]

Соль флексов как раз в том, что не нужно использовать медиазапросы (по крайней мере, можно значительно сократить их количество). А тут предлагаете его использовать для банального переноса контента на новую строку.

[dsemagin]

Ну нужно переопределить стиль. Или сделать марджин с другой стороны для обоих элементов, тогда смотреться будет симметрично

[Посторонним В.]

dsemagin, да, я так и сделал в итоге, но это всё равно не то.