Как изменять ширину flex элемента при активации flex-wrap?

Question

[Alena_Y]

Доброго времени суток, есть контейнер, в контейнере два flex элемента, первый имеет ширину в 60%, второй в 40%
В целях адаптации под мобильные экраны было добавлено свойство flex-wrap, чтобы на маленьких разрешениях второй элемент не налезал на другой, а переносился на другую строку
Но есть проблема: при переносе второго элемента на другую строку его ширина (40%) остаётся, а в случае перенесения хотелось бы, чтобы второй элемент занимал все пространство (ширина на 100%)
Хотела спросить, какие есть js-методы для отслеживания события flex-wrap, и можно ли поменять ширину элемента при переносе на новую строку силами css?

Answer 1

[hzzzzl]

Но есть проблема: при переносе второго элемента на другую строку

примерно замерить в пикселях, в какой момент это происходит, и

@media (max-width: 600px) {  /*  при 600 рх */
  .element2 {  
    flex-basis: 100%;    /*   на всю ширину */ 
  }
}

Comments

[Alena_Y]

Спасибо, все работает шикарно, но я сделала через max-width

[Alena_Y]

А можно сразу ещё один вопрос задать, как сделать блоки одинаковый ширины?
Насколько понимаю, по-человечески, без таблиц, силами css это не реализовать, как это можно сделать с js?

[Ankhena]

Только лучше width, чтобы не получить странного, если кому-нибудь придет в голову поменять flex-direction.

А еще лучше просто поменять родителю display с флекса на block.