CSS Div Of Width Auto Filling Entire Parent Div - css

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;