CSS to get the overflow div container max width depending on inside elements

Question

I have a container and overflow <div> that shows many <ul> <li> lists... each always has the same number of items <li> inside, both always bordered, like a table.

BUT... I can have a case where the <ul> has only one bordered <li>.

When I set the width of the <li> to 100%, the Chrome shows the right border seted to the margin/limit of the container div width, as shown in the image bellow:

I´d like the right border of the lonely <li> should be positioned to the width limit (overflow) of the other <ul> <li> lists, as shown.

Is it possible? What am I doing wrong?

FIDDLE: http://jsfiddle.net/5hr7p/

Answer 1

have look at this:

I changed your viewing container properties to: (it would work without float:left)

div.painel-linear {
width: 100%;    
float: left;    
overflow: hidden;   
overflow-x: scroll; 
 }

also added this to your blue border "li" element, now border and padding are added to overall size of an element, so when you set width to 100% bolder wont stick outside the container :)

.obs{
    -moz-box-sizing: border-box;    
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
 }

I added /* added */ comments everywhere I added something to your css, and haven't added any fixed with or height.

Now tag

In this version I put it on the top of the box so it doesn't scroll with the content:

http://jsfiddle.net/5hr7p/1/

In this one I left it inside the content but added:

h3{
     position:fixed;
}
.painel-linear div.pl-passos {
     margin-top:60px
}

http://jsfiddle.net/5hr7p/2/

EDIT

Ok then, to div which you just created add

float:left

and that's it,

your "ul" with border was expanding only to size of his parent which was "div.painel-linear div.pl-passos" so it couldn't be the same witdh as the rest of ul elements. New div is parent for all ul elements with same width so its possible to expand "ul" with borders to size of the rest of ul. Hope it makes sense :P