Skip to content

Instantly share code, notes, and snippets.

@lintonye

lintonye/3.8-flex-under-the-hood-solution.md

Last active June 14, 2018 02:52
Show Gist options
  • Save lintonye/53649065043aa43a85e36ecec46992ec to your computer and use it in GitHub Desktop.
Save lintonye/53649065043aa43a85e36ecec46992ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
3.8-flex-under-the-hood-solution.md

Solutions:

  1. Because the “name” style contains “flex: 1”, the name text is flexible. This means it may grow or shrink depending on how much space is available in its container. Now this is important: the description text is really tall -- so tall that it uses up all the space in the container and it still sticks out. Therefore, the flexible items in the same container are shrunk to make room for the description text. Because the description is too tall, the name text is compressed to 0 height. That’s why it’s invisible. Phew…

  2. Now when the hat image is made flexible, it gets shrunk too. This time, because the image can be shrunk down quite a bit -- to the point that the container has enough room for all its children, including the tall description text that used to stick out. Now, everybody is happy. The name, hat image, description text are all displayed correctly. Notice the last line of the description “<= The end”. It was not visible before since the description stuck outside of its container.

  3. Before taking out “flex: 1” from the “name” style, notice the name and hat image actually has the same height. Why? Because both “name” and “hat” has “flex: 1”. They are equally flexible. Now if we make the name inflexible (by removing “flex: 1”), the height of name will wrap up to the height of the text. The hat image then grows bigger to fill up this extra space.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment