How to make an item background visible on overflow? - html

Question

I have a small dropdown selection inside overflow box. Problem is I cannot make links background fill full width. Just try to scroll:
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.inner a {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
.inner.block a {
display: block;
}
<p>inline-block:</p>
<div class="outer">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
<p>block:</p>
<div class="outer">
<div class="inner block">Some link title in here.</div>
<div class="inner block">Some much longer link title in here.</div>
</div>
Also on Playground.
I can modify CSS and HTML any way, the container has position: absolute. Also, the background is an image repeating, not a solid color.
How to make the background behind the text to extend to the edge?

Answer 1

Just wrap the links in another div. If you need background images per link, attach them to inner div. If you need the whole bar clickable, flip the <a>'s and the <div>'s. Like this:
<div class="outer">
<div class="background">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
.background {
display: inline-block;
white-space: nowrap;
}
.background .inner {
background: none #ccc;
}
JsFiddle
Hope that takes everything you needed into account.

Answer 2

In my example, links are clickabe in full width, and you can add repeateable background easly.
<div class="outer">
<div class="background">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
-
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.outer a{
display: block;
background: url(http://nonessentials.org/wp-content/uploads/2014/01/dots-small-pattern.png);
background-size:cover;
}
.background {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
JsFiddle

Answer 3

I hope this could be the solution:
<p>inline-block:</p>
<div class="outer">
<div class="table">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.table {
display:table;
}
.inner {
display:table-row;
}
.inner a {
background: none #ccc;
display: block;
white-space: nowrap;
}
.inner a:hover {
background-color:orange;
}
Demo: http://jsfiddle.net/jscohdL0/27/
So, wrapper div again, but with display:table property, and inner divs as table-rows... Clickable, hoverable™...

Answer 4

Without using any wrapper:
.inner {
width: 300px;
}
.inner a {
background: none #ccc;
display: inline-block;
white-space: nowrap;
width:100%; /*addition*/
}
With wrapper:
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.cover {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
.inner a {
width: 100%;
display: inline-block;
}
.inner.block a {
display: block;
}
<p>inline-block:</p>
<div class="outer">
<div class="cover">
<div class="inner">Some link title in here.
</div>
<div class="inner">Some much longer link title in here.
</div>
</div>
</div>
<p>block:</p>
<div class="outer">
<div class="cover">
<div class="inner block">Some link title in here.
</div>
<div class="inner block">Some much longer link title in here.
</div>
</div>
</div>