Растянуть div на всю свободную (максимальную) ширину

Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого. Второй блок должен быть растянут на всю остальную (свободную) ширину.
.parent { border: 2px solid red; height: 30px; line-height: 26px; } .child { display: inline-block; border: 2px solid blue; }

Содержимое

Второе содержимое

Как можно с помощью CSS растянуть второй блок на всю свободную ширину?

Ответ

Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную) ширину:
Современный метод ― с помощью flexbox.
.parent { display: flex; border: 2px solid red; height: 30px; line-height: 26px; } .child { display: block; border: 2px solid blue; } /* Растягиваем второй блок на максимальнуцю ширину */ .child.max { flex: 1; }

Содержимое

Второе содержимое

Один из необычных методов ― использовать float и overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее...
.parent { border: 2px solid red; line-height: 26px; overflow: auto; /* Это чтобы родитель не терял высоту */ } .child { display: block; float: left; border: 2px solid blue; } /* Растягиваем второй блок на максимальнуцю ширину */ .child.max { float: none; overflow: auto; }

Содержимое

Второе содержимое

Уточнение: overflow должен быть единственным в родителе и находится после всех float.