Есть у меня контейнер, для которого указан min-width, но не указан width.
Внутри него сначала идет строка breadcrumbs, а следом блок основного контента.
<div class="wrapper">
<ul class="breadcrumbs">
<li>one</li>
<li>two</li>
<li>three</li>
<li>lorem ipsum dolor sit amet</li>
<li>lorem ipsum dolor sit amet</li>
</ul>
<div class="content"></div>
</div>
body { text-align: center; }
.wrapper { display: inline-block; min-width: 400px; text-align: left; border: 1px solid #000; }
.breadcrumbs { background-color: #ddd; list-style: none; margin: 0; padding: 0; }
.breadcrumbs > li { display: inline; }
.breadcrumbs > li:before { content: ' > '; }
.breadcrumbs > li:first-child:before { content: ''; }
.content { width: 400px; height: 100px; background: #aaa; }
.content1 { width: 500px; }
Если цепочка breadcrumbs оказывается длинной, то, вместо того, чтобы переноситься, она начинает распирать контейнер.
Ширина блока .content задается из админки и он имеет право распирать контейнер. А вот breadcrumbs не должен распирать, а должен переноситься в случае необходимости.
Вот
наглядный пример.
Задача вроде выглядит несложно, но что-то я запутался. Не получается победить…
Я знаю, можно было бы решить в пару строк javascript'а, но хотелось бы обойтись чистой версткой.