HTML中如何让Logo与用户信息块对齐并使进度条宽度为100%？

我用Flex布局对齐Logo和包含用户名、等级及进度条的区块，但该布局导致进度条显示异常，如何设置才能让进度条宽度为100%？

我的代码 #

HTML代码 #

<div class="class" id="user"> 
            <img src="user.svg"> 
            <div>
                <h2>username</h2> 
                <h2> Уровень </h2>
               <div id="container">
                    <div id="progress"> 80% </div>
               </div>
                
            </div>
        </div>

当前效果 #

CSS代码 #

#user { 
    display:flex; 
} 

#container {
    background-color: white;
    width: 100%;
}
#progress{
    background-color: #fd6a72;
    width: 100%;
}

解决方法 #

问题出在Flex容器的子元素（包裹用户名、等级和进度条的<div>）默认不会填充容器剩余空间，它的宽度被内部内容撑开，导致里面的#container设置width:100%也只能跟着父元素的内容宽度走。

只需给这个子元素添加flex: 1属性，让它占据Flex容器中除Logo外的所有可用空间，这样#container的width:100%就能生效：

#user { 
    display:flex; 
} 

/* 新增：让用户信息区块填充剩余空间 */
#user > div {
    flex: 1;
}

#container {
    background-color: white;
    width: 100%;
}
#progress{
    background-color: #fd6a72;
    width: 80%; /* 建议改成实际进度值，否则进度条会和容器同宽，看不到白色背景 */
}

另外补充：你示例里进度条显示80%，但原CSS里#progress的width设为100%，这样会完全覆盖白色容器，看不出进度效果，所以把进度条宽度改成对应百分比更合理。

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