indigo_style: P.S. немного улучшил код. Раньше если продолжать уменьшать ширину экрана, и при этом текст не помещался, то блок уходил из видимости (залазил за экран). Добавил overflow: hidden; Ну и для красоты text-overflow: ellipsis;
indigo_style: Остальные 10-20% того что не вышло, это позиция текста. Хотелось чтобы когда блоки были на одной строчке, текст левого блока был text-align: left; А когда блоки на двух строчках, то text-align: center; Как уже этого добиться, я даже не знаю. JS применять не хочется, но потеря не велика, так что пусть уже так будет.)
indigo_style: Нет, без медиа. От смотрите, есть два блока. Правый (имя пользователя) и левый (кнопка). Кнопка должна иметь фиксированный размер (к примеру 200px). Блок где должно быть имя пользователя может иметь разную ширину содержимого. При этом текст не переносится (white-space: nowrap;). И нужно было сделать так, чтобы при изменении размера окна, когда блоки перестают быть на одной строчке, а передвигаются в столбик, то левый и правый блок (ну или верхний и нижний) должны автоматически растянутся на всю доступную им ширину. Но немного поизучав flex я все же добился нужно мне результата. Ну почти, на 80-90%. Пришлось отказаться от одной вещи.
Воо, что-то близкое. Немного не то конечно, но я попробовал немного под свою задачу переделать код. Вот: codepen.io/anon/pen/RoVaPx
Попробуйте уменьшить размер экрана, и вы что когда контент перестанет влезать, то блоки сменят позицию. С левым блоком все хорошо, но от правый блок не увеличивается на 100% ширину.
Можете помочь сделать так, чтобы правый блок имел фиксированную ширину когда элементы находятся в строке, но чтобы он же имел 100% ширину когда находился в столбце. (То есть когда ниже левого блока).
Спасибо! Но вы меня не так поняли, и в этом моя вина. Блоки могут иметь произвольную ширину. Ну или хотя бы один, левый (Там текст). То есть ширина не фиксированная. Она относительная. media с шириной не решит мою задачу.
