Почему не получается вычесть padding из размера меню?

Question

[beduin01]

Хочу вычесть размеры отступов(паддинга) из размеров материнского блока т.е. сделать так, чтобы при изменении ширины дочернего блока размеры родителя бы не менялись. Проблема в том, что это упорно не работает.
https://jsfiddle.net/bt5pmmkc/
Пробовал на 83 строке делать: box-sizing: border-box; однако не помогло.

Графически это выглядит так: img.ctrlv.in/img/16/12/27/5862796de0ca4.png

Answer 1

[Михаил]

Как вариант. Если я правильно смысл понял

Comments

[beduin01]

А не подскажите что поменяли?

[beduin01]

Вижу что у контейнера `flex-basis: 260px;` появился -- как он влияние может оказывать?

[beduin01]

И почему именно 260?

[Михаил]

beduin01: 260 для примера. Тут надо подобрать, то что вам подходит. Примерно следущее происходит. С помощью flex-shrink запрещаем элементу сжиматься. flex-basis выставлять базовый размер перед распределением пространства. Затем срабатывают ваши flex-grow в 0.7 и 0.3 и между элементами распределяется пространство.

[beduin01]

Михаил: а почему box-sizing не срабатывает?

Answer 2

[Ankhena]

Ну так box-sizing надо к дочернему применять, это же его ширина не должна меняться при изменении его же паддингов.

Comments

[beduin01]

В моем случае это разве не `loginmenu` ? Просто я к нему и применяю.

[Ankhena]

beduin01: Если меняется ширина дочерних, то ширина родительского изменится тоже, если она не фиксирована. Значит постоянной должна быть ширина у дочернего. Паддинг изменяется, ширина остается.

В своих проектах указываю box-sizing для * в начале css, очень удобно.