Case Description
Horizontal arrangement is generally handled by elastic boxes, but there will be a problem, adding height: 100% to the green content will not take effect. Reason: After the parent element sets flex, the child element height: 100% does not take effect. When a child element sets its height as a percentage, its reference is the height of its parent element. But when the flex attribute is set on the parent element, its height becomes expanded by the child element, so there is no longer a fixed value as a reference. One of the solutions is to set a fixed height for the parent element or use the min-height attribute to limit the height so that the child element calculates the height according to the percentage. In addition, you can also consider using other layout methods, such as grid layout.
Let’s use the grid directly here, it’s faster.
case code
Add to parent element
display: grid;
grid-template-columns: auto auto auto;
Example understanding:
