CSS Div Of Width 自动填充整个父 Div

Question

这是我的代码:

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   
}

.divUserContCon
{
    width: auto;
    height: 100%;

    background-color: red;
}

.divUserCon
{
    width: 50px;
    height: 20px;
}

HTML:

<div class="divUserRepCont">
    <div class="divUserContCon">
        <div class="divUserCon">

        </div>
    </div>
</div>

我期待一个宽度为 50 像素的红色条，但自动宽度“divUserContCon”填满了它的父 div 的整个 195 像素。这是为什么？

编辑:

divUserContCon 具有自动宽度的目的是因为:

divUserCon 的大小会动态变化，并且它本身会有背景色。

divUserContCon，将成为 divUserCon 的容器，它本身将具有背景颜色和填充。

因此，如果 divUserCon 的宽度为 50px，背景为绿色，则 divUserContCon 的宽度将为 50px(自动)+ 一些填充和背景颜色。

Answer 1

width:50px; 

需要放在divUserContCon中。您不能依赖 auto 只占用任何子 div 的宽度。