Как сделать, чтобы границы блока не выходили за родительский элемент?

Question

[BtchBetterHaveMyMoney]

Есть пункт меню. Хочу сделать, чтобы при наведении на ссылку появлялся фон, высотой с родительский элемент. Но height: 100%; не помогает. Так же, если задаю высоту в пикселях -- выходит за пределы родительского блока. Ничего, кроме костылей, в голову не лезет. Как бороться с этим?
Код здесь

Answer 1

[ediboba]

.main-menu ul добавить margin 0 И height 100%

Answer 2

[L1nks]

https://jsfiddle.net/1ptxLwa3/
Лучше не задавать фиксированную ширину для контейнера, потому что если вдруг контента или текста станет больше, то будет переполнение и все сломается.
Лучше ссылку увеличить за счет padding'ов.
flex-direction: row;
Можно не указывать в css, так как это значение по умолчанию, если вы задаете display: flex
Для .main-menu тоже можно не указывать width: 100% , div - это блочный элемент, который тянется на всю ширину родительского контейнера

Если задача была , чтобы область клика по ссылке была больше, то вариант ediboba не сработает, потому что увеличится только высота   , но ссылка все еще будет небольшого размера ,и чтобы клик сработал придется тыкать именно текст.