我有YouTube风格的标题像css，当我减少我的网站的大小，我的YouTube风格的标题宽度增加，我的图标超出了网站的边界，但当尝试同样的事情与https://m.youtube.com/它不增加其宽度，无论你使它多么小，任何想法在这方面？我不想使用溢出：隐藏;因为当网站大小减少，然后它削减了我的图标，图标应该仍然可见，就像在youtube移动版本。
在这里试试：https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
代码：

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import NotificationsIcon from "@material-ui/icons/Notifications";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import VideoCallIcon from "@material-ui/icons/VideoCall";
import AppsIcon from "@material-ui/icons/Apps";
import "./app.css";

export default function EmailAvatar() {
  return (
    <div className="box-container">
      <div className="header">
        <div className="header__left">
          <MenuIcon />
          {/* <img
            className="header__logo"
            src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
            alt=""
          /> */}
        </div>
        <div className="header__input">
          <input placeholder="Search" type="text" />
        </div>
        <div className="header__icons">
          <span title="Create">
            <VideoCallIcon className="header__icon" />
          </span>
          <span>
            <AppsIcon className="header__icon" />
          </span>

          <span title="Notifications">
            {" "}
            <NotificationsIcon className="header__icon" />
          </span>

          <Avatar
            alt="Remy Sharp"
            src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
          />
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);

img问题：

youtube手机版：