Tips

Never use % in a flex box

You will get a random jank in the layout if you do so.

• If you want a child to be 100% in a single direction, just have the parent layout in the cross dimension (e.g. a vertical layout will automatically have its children 100% width).

• If you want a child to be 100% in both dimensions, then use vertical on parent and flex on the child to have it take up all available parent space.

padding not margin

Margins collapse, padding doesn't. If you want a maintainable layout don't be lazy and use margin, instead just wrap in a div

<div> <!-- use padding on this div -->
    <!-- the content you want margined -->
</div>

inline-block not inline

If you are curious here is a visual difference. Don't have something that completely ignores its height property.