flex-shrink

flex-shrink(...)

Description

Documentation for flex-shrink.

JavaScript CSS Flexbox Official Docs

Real-World Examples

Practical code examples showing how flex-shrink is used in real projects.

.ai-categories-scroll::-webkit-scrollbar {
            display: none;
        }

        .ai-category-chip {
            flex-shrink: 0;
            background: var(--ai-bg-command);
            border: 1px solid var(--ai-border);
            border-radius: var(--ai-radius-xl);
            padding: var(--ai-spacing-sm) var(--ai-spacing-md);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--ai-transition-fast);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: var(--ai-spacing-xs);
            min-height: 36px;
        }

        .ai-category-chip.active {
            background: var(--ai-primary);
            border-color: var(--ai-primary);
            color: white;
<div className="bg-white rounded-lg border border-gray-200 p-8 mb-8">
                                        <h3 className="text-lg font-bold text-center mb-8">TOP 3 순위</h3>
                                        <div className="flex justify-center items-end gap-6 sm:gap-10 mb-8">
                                            {/* 2위 */}
                                            {leaderboardData[1] && (
                                                <div className="text-center flex-shrink-0 w-24 sm:w-28">
                                                    <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-100 rounded-ful...
                                                        <span className="text-xl sm:text-2xl">🥈</span>
                                                    </div>
                                                    <div className="font-semibold text-base sm:text-lg mb-2" title={l...
                                                    <div className="text-xs sm:text-sm text-gray-500 mb-3">
                                                        {timePeriod === 'today' ? '오늘' : timePeriod === 'week' ? '이번 ...
                                                    </div>
                                                    <div className="w-20 h-20 sm:w-24 sm:h-24 bg-gray-300 rounded-t-l...
                                                </div>
                                            )}

                                            {/* 1위 */}
                                            {leaderboardData[0] && (
                                                <div className="text-center flex-shrink-0 w-28 sm:w-32">
                                                    <div className="w-20 h-20 sm:w-24 sm:h-24 bg-yellow-100 rounded-f...
                                                        <span className="text-2xl sm:text-3xl">🥇</span>
                                                    </div>
                                                    <div className="font-bold text-lg sm:text-xl mb-2" title={leaderb...
                                                    <div className="text-sm sm:text-base text-gray-600 mb-3">