Why Doesn\'t Setting a Fixed Height on a Flex Item Affect Its Size?

For this example, it is enough to handle this line:

.flex-item {
    ... ;
    height: auto;
}

Modify its value by:

.flex-item {
    ... ;
    height: 50px;
}

This modification will not change anything at all. The height will still be calculated automatically.

To make all square cells read just below:

Here is one possible way to make all the cells square using Flexbox.

1. To constrain the aspect-ratio, either manually or as an absolute value, set with percentages as you already did.
2. Then reset Flexbox related height/width on those cells to auto. These ensure that the items do not resize to fit the container size when it changes.

.flex-item {
  ... ;
  height: auto;
  width: auto;
  min-width: 50px; /* minimum width of 50px; adapt to your needs */ 
}

The above is the detailed content of Why Doesn't Setting a Fixed Height on a Flex Item Affect Its Size?. For more information, please follow other related articles on the PHP Chinese website!