Длинная строка распирает контейнер с min-width?

Question

[pxx]

Есть у меня контейнер, для которого указан 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'а, но хотелось бы обойтись чистой версткой.

Answer 1

[m-haritonov]

Можно перенести .breadcrumbs внутрь блока .content.

Тогда .breadcrumbs будет иметь ширину не больше, чем .content, а в случае превышения этой ширины содержимое .breadcrumbs будет переноситься на следующую строчку. Это ведь то, что Вы имели ввиду?!

Сейчас Вы пытаетесь сделать так, чтобы блок .wrapper мог распираться блоком .content, но при этом не мог распираться блоком .breadcrumbs.

Answer 2

[MT]

Вынесите блок .breadcrumbs из блока .wrapper и жёстко задайте ему (.breadcrumbs) нужную ширину.

Comments

[pxx]

Дело в том, что ширина у него не должна быть жесткой, а должна быть равной ширине контейнера