Вариант использования для этого - адаптивная форма с переключателями. На большом экране P C все переключатели обычно помещаются в одну строку на экране (как элементы flex в негибкой упаковке flex с flex-direction: row). На телефоне не все переключатели обычно помещаются на одной линии. Если какая-то одна радио-кнопка не подходит, я хочу, чтобы все они отображали по одной в строке (например, флекс-элементы в гибком контейнере с flex-direction: column).
Это было бы легко, если бы я знал, как долго будет работать мое радио метки кнопок должны были быть, но я нет (они приходят из настраиваемой клиентом базы данных). 
Итак, что я хочу, это так:
<html>
<head>
<title>Responsive Radio Button</title>
<style type="text/css">
@media (min-width: 652px) {
.flexContainer {
display:flex;
flex-direction: row;
}
}
@media (max-width: 652px) {
.flexContainer {
display:flex;
flex-direction: column;
}
}
</style>
</head>
<body>
<div class='flexContainer'>
<div>Medium Length div</div>
<div>Short div</div>
<div>Longest div in this entire html page!</div>
</div>
</div>
</body>
</html>
, где я не знаю, прежде чем это будет точка останова @media (min-width: /max-width:).
То, что я пробовал
Это код моей работы
<html>
<head>
<title>Responsive Radio Button</title>
<style type="text/css">
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
/** border so I can see what is going on */
border: 1px dotted lightblue;
}
.flexItem {
/** white-space and min-width stop text wrapping */
white-space: nowrap;
min-width: max-content;
/** next three lines could be shortened to flex: 1 0 0px; (grow shrink basis) */
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
/** border and margin so I can see what is going on */
border: 1px solid black;
margin: 2px;
}
</style>
</head>
<body>
<div class='flexContainer'>
<div class='flexItem'>Medium Length div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Longest div in this entire html page!</div>
</div>
</div>
</body>
</html>
flex: 1 0 0 Используется для того, чтобы все элементы flex были равны в размер главной оси. Но когда начинается смещение, равенство размеров главной оси уменьшается. Если бы все flex-элементы оставались одинакового размера, все они были бы слишком длинными для родительского flex-контейнера в одно и то же время, так что все переносились бы. Однако этого не происходит, так как минимальный размер каждого изгибаемых элементов различен, поэтому, хотя изгибаемые элементы никогда не уменьшаются, все они начинают расти, заполняя оставшееся пространство, начиная с другого размера.
Как будто я хочу flex-basis: largest-sibling, под которым я подразумеваю, что самый маленький изгибаемый элемент начинался бы с того же размера, что и самый большой изгибаемый элемент, и никогда не становился бы меньше, чем самый большой изгибаемый элемент.