Как сделать 2 деления встроенными, с шириной в зависимости от содержимого

Question

У меня есть бар, разделенный на 2 части, одна содержит текст, вторая - это какие-то панировочные сухари. Оба элемента должны быть встроены.

Хитрость в том, что левый div должен иметь гибкий контент, в то время как правый должен подгоняться влево к левому:

----------------------------------------------------------------------------------
|long text long text long text long text| <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

когда экран укорачивается, например, до ширины 700px, оставленный div должен занять, скажем, 30% полосы. Если текст слишком длинный, его следует обрезать переполнением:hidden:

-------------------------------------------------------
|long text long text...| <...breadcrumb navigation...>|
-------------------------------------------------------

Если текст короткий, он должен выглядеть так:

----------------------------------------------------------------------------------
|short text| <...breadcrumb navigation...>                                       |
----------------------------------------------------------------------------------

И при изменении размера экрана ширина 30% не понадобится:

-------------------------------------------------------
|short text| <...breadcrumb navigation...>            |
-------------------------------------------------------

Я пробовал несколько подходов, включая display:table-cell, но результат был:

----------------------------------------------------------------------------------
|short text                             | <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

Последний, который почти работал, был float: left, но в этом случае переполнение: скрытый не работал, текст либо выдвигал весь экран окна макета, либо переходил к следующей строке.

У кого-нибудь есть идеи, как это можно решить самым простым способом, желательно без js? Спасибо

Answer 1

Переместите свой левый div влево, установите максимальную ширину и установите пустое пространство для nowrap.

.left, .right { overflow:hidden; white-space:nowrap; }
.left { max-width:30%; float:left; background:green; }
.right { background:red; }

<div class="left">asdf asdfasdf asdfasdf asdfasdf asdfasdf asdfsadfa asdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfas as</div>
<div class="right">asdfasfasdfasdfsafdsadf</div>