Что делать с выходящим дочерним элементом за отступы родителя?

Question

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Доброго времени суток.
Скажите, что не так с этим дочерним элементом, почему он выходит за внутренний отступ родителя ?




Стили родителя:

display: block;
    position: absolute;
    top: 100%;
    left: 0%;
    padding: 20px;
    z-index: 1000;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border-radius: 0 0 2px 2px;

Код дочернего элемента:

border-bottom: 2px solid #99cc34;
    padding: 5px 10px;
    padding-right: 0;
    width: 170px;
    font-weight: 400;

Comments

[Рома Зварич]

Выложите код на https://codepen.io/pen/, чтобы можно было пощупать

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Рома Зварич, уже решил, спасибо)

Answer 1

[Lord_Dantes]

Поставьте фикс ширину 100 процентов дочернему и обоим box-sizing: border-box;

Comments

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Да, или просто добавить 40px ширины к род блоку, которых там не хватало, сам решил, спасибо)

[Rustam Bainazarov]

Чип, мда... клёвое решение, которое оным не является. Это костыль. Человек же вам написал истинное решение, основанное на CSS.

[Lord_Dantes]

Рустам Байназаров,

Добавил 40px к родительскому блоку и всё встало на свои места!

Ору.. ))))

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

slave, прошу Вас больше не писать подобный спам под моими вопросами. Я не профессиональный верстальщик, поэтому "орать" под моими вопросами не надо.

[Lord_Dantes]

Чип, давайте начнем с того что все мы не идеальны и продолжим тем что я подсказал вам верный ответ на что вы ответили что лучше будет добавить 40пх к родителю, вот с этого я "ору" а не с того что вы не компетентны.

[Rustam Bainazarov]

Чип, если вы не профессионал — это не страшно, но тогда оставьте вопрос того, что считать ответом, тем людям, которые в этом хотя бы что-то понимают.

Ибо в ваш вопрос могут зайти иные участники. И когда они увидят ответ на данный вопрос, мол, «надо было добавить 40 пикселей ширины» — они получат неверный ответ (костыль) на поставленный вопрос.

Иными словами, следуя вашему ответу, простейшее понимание наследования ширины от родителя превратится в калькуляцию по добавлению пикселей. Такое решение проблемы — не решение и не может им являться в данном случае.

Answer 2

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Добавил 40px к родительскому блоку и всё встало на свои места!