Menu
I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the flex items taking less space than the size of the container.
Aside from setting an explicit width on the flex-container, is there a way of just having the equivalent of width: auto to remove the overflow?
738
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
The main size of a flex item is the size it has in the main dimension. If you are working in a row — in English — then the main size is the width. In a column in English, the main size is the height. Items also have a minimum and maximum main size as defined by their min-width or min-height on the main dimension.
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100% , and enable wrap on the container. The item now consumes all available space.
If you mean you want the container to be the width of the items, rather than the items expanding to the container width...
You may be able to get that by changing display:flex to display:inline-flex
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
