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

Question

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

.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图标和组件。为了相应地对它们进行样式设置，我使用了多个类，并在其中使用多个灵活框

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