How to Make Flexbox Children Occupy 100% Height of Their Parent

When attempting to fill the vertical space of a flex item within a Flexbox, one may encounter the problem where the child element, in this case .flex-2-child, does not fully extend vertically.

To resolve this issue, various approaches have been proposed. One common solution is to set the height of the parent element, .flex-2, to 100%. However, this approach can lead to inconsistencies and bugs across different browsers (e.g., Chrome).

An alternative approach is to utilize the align-items property with the value stretch. By setting .flex-2's align-items to stretch, its flex items will stretch to fill the parent's available vertical space. It's important to note that setting height: 100% on the child element should be removed to avoid conflicts.

Using align-self on the .flex-2-child item only is another option. This allows you to stretch the desired child element individually without affecting other flex items within the parent.

By employing these methods, you can ensure that Flexbox children properly occupy 100% of their parent's height, creating the desired vertical alignment and space utilization.