HTML/CSS中为Offer__Sidebar设置flex:0.2占20%宽度不生效如何解决

问题根源 #

flex 属性仅对父元素设置了 display: flex 的直接子元素生效，你当前的代码存在两个问题导致 flex: 0.2 不生效：

1. 布局层级错误：你需要并排的侧边栏 .Offer__Sidebar 与右侧餐厅区域 .Offer__Restuarants 不是同级元素，侧边栏被嵌套在 .Offers 容器内，无法和右侧区域按比例分配宽度
2. 父容器未设置 flex 布局：即使不需要和右侧区域并排，你也没有给侧边栏的直接父元素 .Offers 添加 display: flex 属性，flex 配置自然不会生效

解决方案 #

第一步：调整HTML结构

把侧边栏从 .Offers 容器中提取出来，和 .Offer__Restuarants 平级，作为 .Section 的直接子元素：

<div className="Section">
    <!-- 侧边栏提到和餐厅区域同级 -->
    <div className="Offer__Sidebar">
        <div className="Offers_Near_You">
            <img
                className="Offer__img"
                src={offersNearYou} />
            <div id="a1" className="Offer__div">
                <div>Offers Near You</div>
                <p>211 OPTIONS</p>
            </div>
        </div>
        <div className="Top_Picks">
            <img
                className="Offer__img"
                src={topPicks} />
            <div id="a1" className="Offer__div">
                <div>Top Picks</div>
                <p>58 OPTIONS</p>
            </div>
        </div>
        <div className="Whats_New">
            <img
                className="Offer__img"
                src={whatsNew} />
            <div id="a1" className="Offer__div">
                <div>What's New</div>
                <p>32 OPTIONS</p>
            </div>
        </div>
        <div className="Vegeterian_Options">
            <img
                className="Offer__img"
                src={vegeterianOption} />
            <div id="a1" className="Offer__div">
                <div>Vegeterian Options</div>
                <p>455 OPTIONS</p>
            </div>
        </div>
        <div className="See_All">
            <img
                className="Offer__img"
                src={seeAll} />
            <div id="a1" className="Offer__div">
                <div>SEE ALL</div>
                <p>866 OPTIONS</p>
            </div>
        </div>
    </div>
    <!-- 右侧餐厅区域 -->
    <div className="Offer__Restuarants">

    </div>
</div>

如果你的 .Offers 容器有其他样式用途，也可以保留该容器，直接将 .Section 设为flex容器即可。

第二步：修改CSS配置

给父容器 .Section 添加 display: flex 属性，同时给右侧餐厅区域设置 flex: 0.8 占据剩余80%宽度：

.Section{
    margin-right: 100px;
    margin-left: 100px;    
    display: flex; /* 新增：设置为flex容器，子元素的flex属性才会生效 */
    gap: 20px; /* 可选：设置侧边栏和右侧区域的间距，避免内容贴在一起 */
    box-sizing: border-box;
}

.Offer__Sidebar{
    font-family: Arial,Helvetica Neue,sans-serif;
    padding-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 5px solid red;
    flex: 0.2; /* 该属性现在可以正常生效，占据20%宽度 */
}

/* 新增：右侧区域占据80%宽度 */
.Offer__Restuarants {
    flex: 0.8;
}

调整完成后侧边栏就会按照你的需求占据总宽度的20%。

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