Как правильно сверстать такое, чтобы один блок занимал все пространство, а другой — оставшееся?

Question

[ZaxapKramer]

Верстал, верстал, и тут подумал: а почему бы не сделать это таблицей? Удобно же... В итоге сижу и не понимаю.
В Chrome все было нормально. Решил открыть в Firefox - все едет.
Открыл jsfiddle в Firefox, сверстал там по-новой - гуд. Открываю в Chrome - едет.
И никак не могу понять, в чем на самом деле ошибка. И как такое лучше и валиднее сверстать, если не таблицами? Чтобы второй блок занимал пространство, которое занимает, а первый - все оставшееся.

https://jsfiddle.net/qgv52dLa/

Comments

[Алмаз Бисенбаев]

Лень чекать код, взял бы да закинул в jsfiddle, но по теме скажу что есть calc(), есть flexbox, загугли, может сможешь правильно применить. А табличная верстка противопоказана.

[ZaxapKramer]

Алмаз Бисенбаев, изменил вопрос - добавил ссылку заместо горы кода. А calc() не подходит, думаю: второй блок нефиксированный - размер зависит от контента.

Answer 1

[Svidrigaylow]

Код, естественно, не читал. Отвечаю на вопрос в заголовке:

"flex-grow

Применяется к: дочернему элементу / flex-элементу.

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

Если у всех элементов свойство flex-grow задано как 1, то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2, то он заберёт в два раза больше места, чем другие.

flex-grow: (по умолчанию 0)
Отрицательные числа не принимаются." (с) frontender.info/a-guide-to-flexbox

Пример на быструю руку: https://jsfiddle.net/1q3d7j2y/

Comments

[ZaxapKramer]

Svidrigaylow, Алмаз Бисенбаев, требуется поддержка браузеров, не поддерживающих flex, так бы уже давно с этим не парился...
https://jsfiddle.net/qgv52dLa/

[Svidrigaylow]

ZaxapKramer: тогда всё упрощает эта фишка - https://pp.vk.me/c628017/v628017389/3674b/T3390wRe...

[ZaxapKramer]

Svidrigaylow, увы, не подходит :(
Сам так делал, но в данном случае, увы, никак... Тем более, все уже без flex написано, но на верстке окна запаролся))

[Ярослав Иванов]

ZaxapKramer: все браузеры поддерживают flex. Вы о чем?

[ZaxapKramer]

Ярослав Иванов, прекрасно понимаю, что старый ишак - не браузер, и все же:
caniuse.com/#search=flex

[Ярослав Иванов]

ZaxapKramer: зачем вам рынок людей, которые сидят на ниже ie10 ? их в мире по пальцам можно посчитать.

[ZaxapKramer]

Ярослав Иванов, как сказать... начальник на последней работе сидел за ie9 и говорил, что у него все криво отображается:) Вы правы...и все же, именно тут он нужен.