max-content
max-content is a value that can be used to define the size of HTML elements. It can be applied to properties that accept sizing values, such as width and height. The min-content value can also be used to size grid and flex layout elements.
When using the max-content value, the element will be sized to fit its content, allowing it to expand to the largest possible size without any wrapping. This is useful for scenarios where you want to ensure that the content is displayed in its entirety, without any truncation. max-content ignores the parent’s dimension, resulting in overflow if the content exceeds the available space.
See the Pen Untitled by majadc (@majadc) on CodePen.