css - 幅のCSSDiv自動入力親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>

幅50pxの赤いバーを期待していますが、代わりに自動幅「divUserContCon」がその親divの195px全体を埋めています。どうしてこれなの？

編集：

自動幅を持つdivUserContConの目的は、次の理由によるものです。

divUserConのサイズは動的に変化し、背景色自体が変わります。

divUserContConは、divUserConのコンテナーになります。このコンテナー自体には、背景色とパディングがあります。

したがって、divUserConの幅が50ピクセルで、背景が緑色の場合、divUserContConは幅50ピクセル（自動）+パディングと背景色になります。

Answer 1

width:50px; 

divUserContConに入れる必要があります。子divの幅のみを取得するためにautoに依存することはできません。

Answer 2

これを試して

<style type="text/css">
.divUserRepCont {
  position: absolute;
  top: 0;
  left: 105px;
  width: 195px;
  height: 25px;   
}
.divUserContCon {
    width: auto;
    height: 25px;
}
.divUserCon {
    width: 50px;
    height: 25px;
    background-color: red;
}
</style>

必要な場合は、cssを追加するだけ.divUserConです。centermargin: 0 auto;

Answer 3

これが私がそれを解決した方法です：

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   

    background-color: orange;
}

.divUserContCon
{
    display: inline-block;

    height: 100%;

    padding-right: 20px;

    background-color: yellow;
}

.divUserCon
{
    display: inline-block;
    height: 20px;

    border-top: 5px solid rgb(62, 62, 62);

    background-color: red;
}

width: auto を display: inline-block; に置き換えました。