如何将个人品牌Logo放在侧边导航栏左下角且不撑宽侧边栏

你的问题根源有两点：

1. 未给侧边栏设置固定宽度，flex: 1 属性会让侧边栏宽度随内容自适应
2. Logo放在导航菜单列表内属于常规文档流，未做宽度约束的图片会按照原始宽高比撑开容器，同时也无法固定在左下角位置

第一步：调整React组件结构 #

将Logo标签从导航列表中移出，放到sideBarWrapper容器的最底部，修改后代码如下：

const Sidebar = () => {
    return (
        <div className="sidebar">
            <div className="sideBarWrapper">
                <div className="sideBarMenu">
                    <h1 className="sideBarTitle">Dashboard</h1>
                        <ul className="sideBarList">
                            <li className="sideBarListItem">
                                <Home  className="sideBarIcon"/>
                                Home
                            </li>

                            <li className="sideBarListItem">
                            <Icon 
                            icon="mdi:currency-btc" 
                            className="sideBarIcon"
                            />
                                Cryptocurrency
                            </li>

                            <li className="sideBarListItem">
                            <Icon 
                            icon="whh:stocks" 
                            
                            className="sideBarIcon"
                            />
                                Stocks
                            </li>

                            <li className="sideBarListItem">
                                <Visibility  className="sideBarIcon"/>
                                Watchlist
                            </li>
                        </ul>
                </div>
                {/* Logo移到容器最底部 */}
                <img className="img" src={Logo} alt="品牌Logo"/>
            </div>   
        </div>
    )
}

export default Sidebar

第二步：修改CSS样式 #

调整侧边栏固定宽度，同时给Logo设置绝对定位和宽度约束，修改后代码如下：

.sidebar{
    /* 替换原来的flex:1，固定侧边栏宽度为250px，可自行调整数值 */
    flex: 0 0 250px;
    width: 250px;
    height:  calc(100vh - 50px);
    background-color: goldenrod;
    position: sticky;
    top: 50px;
}

.sideBarWrapper{
    position: relative;
    padding: 20px;
    color: #555;
    /* 给父容器加高度，让绝对定位基于整个侧边栏计算位置 */
    height: 100%;
    box-sizing: border-box;
}

.sideBarMenu{
    margin-bottom: 10px;
}

.sideBarTitle{
    font-size: 15px;
    color: black;
}

.sideBarList{
    list-style: none;
    padding: 5px;
}

.sideBarListItem{
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.sideBarListItem.active, .sideBarListItem:hover{
    background-color: whitesmoke
}

.sideBarIcon{
    margin-right: 5px;
    font-size: 50px !important;
}

.img{
   /* 绝对定位固定到左下角 */
   position: absolute;
   bottom: 70px;
   left: 20px;
   /* 宽度限制为侧边栏内宽，避免撑宽容器 */
   max-width: calc(100% - 40px);
   /* 高度自适应，也可以固定高度，宽度会自动等比缩放 */
   height: auto;
}

内容的提问来源于stack exchange，提问作者user11127396