Qwwwik Flexbox styles
Flex container html, body
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
Flex item #wrapper
#wrapper { /* maximum width: 720 pixels */
flex-grow: 1;
flex-shrink: 1;
}
#content inside #wrapper
#content { /* maximum width: 640 pixels */
flex-shrink: 1;
}
The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. The main size is the width or height of the flex container or flex item, whichever is in the main dimension.
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.
When we set a flex-grow value of 1 or larger, we are telling our element to grow to take up the available space. An element with a flex-grow value set to 0 will not grow to take up available space.
Flex-shrink works very similarly to flex-grow, only instead of dealing with extra space, it deals with space not needed by an elements content.
An element with a flex-shrink value of 0 will not shrink as our page gets smaller. This is only true if there is no flex-grow value on this element. If there is a flex-grow value, the element won’t shrink smaller than its content.
An element with a flex shrink value of 1 will shrink, but not smaller than its content.
If you have more than one element per column (or line), the total number of flex-shrink values will be considered, when dividing up how much each element should shrink by (medium.com).
flex-grow: 1 and flex-shrink: 1 can be used together.
flex-grow: 1 allows the flex item to grow and take up available space within the flex container. It specifies the factor by which the flex item will grow relative to other flex items in the container.
flex-shrink: 1 allows the flex item to shrink if necessary to prevent overflow. It specifies the factor by which the flex item will shrink relative to other flex items in the container.
Together, these properties ensure that the flex item will both grow and shrink appropriately to fill the available space within the flex container while maintaining its proportions relative to other flex items.
See information »