为什么当浏览器窗口缩小时我的弹性项目没有缩小？

Question

CSS CODE，用于使用 flexbox 的 header 组件

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 0.75);
}

.header__left {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.header__input {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #eff2f5;
    padding: 10px;
    margin-left: 10px;
    border-radius: 33px;
}

.header__input > input {
    background-color: transparent;
    border: none;
    outline-width: 0;
}

.header__center {
    display: flex;
    justify-content: center;
}

.header__option {
    display: flex;
    align-items: center;
    padding: 0 30px;
    cursor: pointer;
}

.header__option:hover {
    background-color: #eff2f5;
    border-radius: 10px;
    align-items: center;
    padding: 0 30px;
}

.header__option > .MuiSvgIcon-root {
    color: #808080;
}

.header__option:hover > .MuiSvgIcon-root {
    color: #2e81f4;
}

.header__right {
    display: flex;
}

.header__info {
    display: flex;
    align-items: center;
}

.header__info > h4 {
    margin-left: 10px;
}

HEADER COMPONENT，我在其中使用了材质 ui 图标和组件。为了相应地设置它们的样式，我使用了多个类并在其中使用了多个 flexbox

import React from 'react';

import './header.styles.css';

import { ReactComponent as NavLogo } from './../../assets/images/logo/facebook.svg';

// MATERIAL UI COMPONENTS

import IconButton from '@material-ui/core/IconButton';
import Avatar from '@material-ui/core/Avatar';

// ICONS

import SubscriptionsOutlinedIcon from '@material-ui/icons/SubscriptionsOutlined';
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import StorefrontOutlinedIcon from '@material-ui/icons/StorefrontOutlined';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SearchIcon from '@material-ui/icons/Search';
import ForumIcon from '@material-ui/icons/Forum';
import FlagIcon from '@material-ui/icons/Flag';
import HomeIcon from '@material-ui/icons/Home';
import AddIcon from '@material-ui/icons/Add';

const Header = ( props ) => {
    return (
        <div className = 'header'>

            <div className = 'header__left'>
                
                <NavLogo />

                <div className = 'header__input'>
                    <SearchIcon />
                    <input type = 'text' />
                </div>

            </div>

            <div className = 'header__center'>

                <div className = 'header__option'>
                    <HomeIcon />
                </div>

                <div className = 'header__option'>
                    <FlagIcon />
                </div>

                <div className = 'header__option'>
                    <SubscriptionsOutlinedIcon />
                </div>

                <div className = 'header__option'>
                    <StorefrontOutlinedIcon />
                </div>

                <div className = 'header__option'>
                    <SupervisedUserCircleIcon />
                </div>

            </div>

            <div className = 'header__right'>

                <div className = 'header__info'>
                    <Avatar />
                    <h4> Akhil </h4>
                </div>

                <IconButton>
                    <AddIcon />
                </IconButton>  
                <IconButton>
                    <ForumIcon />
                </IconButton>  
                <IconButton>
                    <NotificationsActiveIcon />
                </IconButton>
                <IconButton>
                    <ExpandMoreIcon />
                </IconButton>            

            </div>

        </div>
    )
};

export { Header };

Header 组件使用 CSS Flex 框设置样式。它工作正常，没有问题，当我缩小窗口屏幕时，弹性框没有根据屏幕尺寸进行调整。如何使用 flexbox 实现这种响应式行为？

Answer 1

如果您希望弹性项目缩小，请使用 flex-shrink 属性。

查看 MDN 上的 flex-shrink 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink