Как забить весь блок без процентов?

Question

[Дмитрий Гавриленко]

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

Условия:

• родительский блок любой ширины
  
• кол-во дочерних блоков не известно
  
• заполнить родительский по ширине любой ценой
  

Answer 1

[Stalker_RED]

Старая добрая табличка же jsfiddle.net/94suv0ah
Можно еще с флексбоксом поробовать jsfiddle.net/putpyo16

Comments

[Дмитрий Гавриленко]

Табличкой не катит.
А флекс не срабатывает почему-то (

[Stalker_RED]

Дмитрий Гавриленко: Почему табличка не катит? Подробнее опишите что вы хотите.

[Дмитрий Гавриленко]

Stalker_RED: я подумал html таблицы. Попробовал не срабатывает по какой-то причине. У меня есть страница, которая будет уходить в печать. Порой ширина дочернего блока слишком велика и вместо одной строки появляется еще N.

[Stalker_RED]

Дмитрий Гавриленко: Если потеря данных допустима, задайте max-width и owerflow.
Если недопустима - ну что-же, будут еще N. Может вообще весь макет переделать с учетом таких длинных "детей".

Answer 2

[Сергей delphinpro]

родителю - display:table + table-layout:fixed (! важно для равного распределения ширины ячеек)
детям - display: table-cell

Или современный вариант - display:flex + justify-content: space-between для родителя

Comments

[Дмитрий Гавриленко]

Почему-то тоже не работает(

[lexchz]

Во flexbox для равного распределения ширины такое точно не сработает, т.к. ширина дочернего блока там равна ширине контента в нём.

[Сергей delphinpro]

Дмитрий Гавриленко: размер контейнеру задайте. width:100%;
lexchz: Не делайте 100% утверждений, если хоть чуть-чуть не уверены в своем ответе.

Для обоих: https://jsfiddle.net/9dte10hj/

[lexchz]

Сергей: отлично, что флексбокс это всё-таки умеет делать.

[Дмитрий Гавриленко]

С таблицами заработало. Забыл убрать overflow и float.

[Дмитрий Гавриленко]

А как сделать чтобы это срабатывало при печати?