So the problem is that you’ve got the <html> node as a flex container, and the <body> node (its child) is the one and only flex item.
Currently, align-self:stretch on #first is ignored, because that property only applies to flex items, and #first is not a flex item (the way you have things set up right now).
To get what you want, you need to make the <body> node a flex container, not the <html> node. So, just change your first style rule to apply to body{ instead of html{
(Also, if you want #second to be aligned to the left, you need flex-start, not flex-end. The left edge is the flex-start horizontal edge, generally.)