ओवरलैपिंग फ्लेक्स आइटम बनाना

फ्लेक्स आइटम की एक क्षैतिज पंक्ति बनाते समय जो उपलब्ध चौड़ाई से अधिक हो सकती है, अक्सर उन्हें ओवरलैप करना वांछनीय होता है . डिफ़ॉल्ट रूप से, फ्लेक्सबॉक्स कंटेनर में फिट होने के लिए आइटम को छोटा कर देगा।

overflow: visible;

width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

अंतिम आइटम या होवर किए गए आइटम को अपना ओवरफ़्लो प्रदर्शित करने की अनुमति देने के लिए :last-child या :hover का उपयोग करें।

• overflow:hidden का उपयोग करके .card आइटम से किसी भी ओवरफ़्लो को छुपाएं।