white-space css property is creating issues with flex.Flex item is not shrinking smaller than its content.If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.īasically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0. You've applied min-width: 0 and the item still doesn't shrink? min-width rendering differently in flex-direction: row and flex-direction: column.For a more detailed explanation see this post:.For example, a flex item in a row-direction container does not get min-height: auto by default.The minimum sizing algorithm applies only on the main axis.Hence, overflow: hidden can be a substitute for min-width: 0 and min-height: 0.If the overflow value is not visible, the value of the min-size property is 0.The min-width: auto and min-height: auto defaults apply only when overflow is visible.On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. The min-width and min-height properties defined in CSS 2.1. Specification introduces a new auto value as the initial value of To provide a more reasonable default minimum size for flex items, this overflow: hidden (or any other value, except visible).You can override these defaults by setting flex items to: for flex items in row-direction and column-direction, respectively. You're encountering a flexbox default setting.Ī flex item cannot be smaller than the size of its content along the main axis.
0 Comments
Leave a Reply. |