align-self property in flexbox is not working?
css, flexbox, html
Solution
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.)
Problem
I am trying to understand flex box: I want to make the “first” block stretched to match the full width of the browser, and the ”second” block of fixed size and aligned to left. So I used `align-items: flex-end` in the parent(`<html>`) and tried to stretch the first block using `align-self: stretch` in the ”first” block. This is not working. Both of them are aligned to the left. ``` <html> <head> <style> html { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; } #first { align-self:stretch; background-color: red; border: 3px solid black; } #second { background-color:green; width: 300px; height: 400px; border: 3px solid yellow; } </style> </head> <body> <div id="first">This is first</div> <div id="second">This is second</div> </body> </html> ```