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

Question

This is my code:

.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>

I am expecting a red bar of width 50px, but instead the auto width "divUserContCon" is filling up the entire 195px of it's parent div. Why is this?

EDIT:

The purpose of divUserContCon having an auto width is because of this:

divUserCon's size will be changing dynamically, and it will have a background colour itself.

divUserContCon, will be the container for divUserCon, which itself will have a background colour AND padding.

So if divUserCon is 50px wide, with a green background, divUserContCon will be 50px wide (auto) + some padding and it's background colour.

Answer 1

width:50px; 

Needs to be put in divUserContCon. You can't rely on auto to only take up the width of any child divs.

Answer 2

Try this

<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>

If you want your .divUserCon in the center then just add margin: 0 auto; in the css.

Answer 3

This is how I solved it:

.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;
}

I replaced the width: auto with display: inline-block;