Почему блок выежает за пределы родительского DIV?

Question

[Евгений]

Доброго времени суток.

Столкнулся с проблемой в CSS, когда блок выходит за пределы родителя. У родителя и ребенка задана ширина 100%. Назначение родителю конкретной ширины, например 500px, проблему решает, но у меня резиновый контейнер, ограниченный по max-width и блок нужен на всю ширину контейнера. Назначение родителю overflow:hidden - тоже не вариант, так как съедает часть ребенка (Жутко звучит :)). Подскажите, пожалуйста, можно ли решить это не прибегая к JS? Вот пример: jsfiddle.net/vhwWw/13

Answer 1

[Евгений]

Add: Усовершенствовал JS код.

var adjust_size = function() {
	var a = $('.btn-toolbar').width();
	var b = Math.min(a -154);
	$('.btn-breadcrumb .btn:last-child').width(b);
};
adjust_size();
$(window).resize(adjust_size);

Благодарю за помощь :)

Answer 2

[telegraphnij_stolb]

display: table-cell элементам. jsfiddle.net/vt3Rx

Comments

[Евгений]

Но при таком подходе не правильно отображаются углы, который созданы с помощью псевдоклассов last-child. Это можно как нибудь исправить?

[telegraphnij_stolb]

Эх. Это не учел. Position relative-absolute не работает с элементами табличного лэйаута.

Тогда тут 2 варианта:
1) JS
2) Внутри этих элементов добавить div, сделав его по размеру таким же. И ему уже задать position relative и от него создавать border-ы с position: absolute.

[Иван]

@Scumtron вы мне лучше скажите, чем этот ответ отличается от моего ниже?

[Евгений]

@0neS, примером использования.

[Евгений]

@telegraphnij_stolb, и все-таки, хотелось бы доработать ваш вариант до логического завершения :)

[Евгений]

@0neS, вы тоже можете помочь примером :)

[Иван]

@Scumtron обновил ответ

[Евгений]

@0neS, Спасибо, но как я уже упоминал выше, при таком подходе не отображаются углы созданные псевдо-классами, при этом надо обойтись без картинок :) А выглядеть дожно вот так: bootsnipp.com/snippets/featured/triangle-breadcrum... но последняя кнопка должна быть резиновой.

[Евгений]

парсер ссылку испортил :) goo.gl/GvdEsE

Answer 3

[Иван]

Чем не устраивают display: table > display: table-row > display: table-cell?
jsfiddle.net/vhwWw/19

Answer 4

[cha-cha]

box-sizing: border-box; Так ваша кнопка влезет как надо. Но учитывая что там есть еще 2, то либо JS либо calc()

Comments

[Евгений]

по видимому, без JS не обойтись.

[Иван]

@Scumtron обойтись. Я выше написал, как.

Answer 5

[Дмитрий Крушевский]

А он у вас и будет вылазить за пределы. Что происходит у вас в коде

.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
  width: 100%;
}

тут вы указываете что кнопка будет размером с родительский элемент, оно и строит его размером как родительский элемент, а поскольку перед нею еще 2 кнопки, то оно сдвигает ее.
Вам тогда уж нужно рассчитывать размеры двух предыдущих кнопок и от 100% отнимать их значение, то что в итоге выйдет и будет размером последней кнопки, тогда она не будет вылазить за пределы.

Answer 6

[Богдан Сломчинский]

Убрали бы лишнее из кода, и показали бы наглядно блоками...