Responsive Page using Flex-box

I wanted to ask that upon applying min -widths and heights on the three main containers, why don't the children of the container seem to take percentage values for their own heights and widths?. Also, I tried to make the activation states of the button with use of the :hover, but during that time I tried to make the extra border that shows during hover with an outline as inset and it worked but half of the outline shows a different color than the one I have chosen, and I need help to understand why.