CODEWITHSUNDEEP
htmlcss
JustAMartin
JustAMartin

Reputation: 13733

How to stretch a DIV horizontally to its content in a scrollable container?

I have a list of items inside a scrollable container. Each item has a :hover style applied. The problem is that if the container is scrolled, then the background gets cropped away, although content is fully visible.

How do I make the DIVs to stretch to full width of content, so it is highlighted entirely when hovering?

Here is a Plunkr

You can see that when you scroll horizontally to about halfway and then hover on items, only some part of them becomes red:

cropped background

.box-container {
    white-space: nowrap;
    min-width: 100%;
    max-height: 100px;
    border:1px solid red;
    overflow: auto;
    cursor: pointer;
}
.item-container div:hover {
    background-color: red;
}
<div style="width:300px;">
    <div class="box-container">
        <div class="item-container">
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 279

Answers (2)

Stickers
Stickers

Reputation: 78686

It sounds bit hacky, but works. table behaves in between inline and block level, the width is decided by the content and forces line break.

.item-container div {
   display: table;
}


.box-container {
    white-space: nowrap;
    min-width: 100%;
    max-height: 100px;
    border:1px solid red;
    overflow: auto;
    cursor: pointer;
}
.item-container div {
    display: table;
}
.item-container div:hover {
    background-color: red;
}
<div style="width:300px;">
    <div class="box-container">
        <div class="item-container">
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
            <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
        </div>
    </div>
</div>

Upvotes: 4

Jesse
Jesse

Reputation: 1262

Try making it 100vw on the div

.item-container div {
  width:100vw;

}

Upvotes: 0

Related Questions