CODEWITHSUNDEEP
cssflexbox
ierdna
ierdna

Reputation: 6293

Flexbox background does not cover children on horizontal overflow

I have a parent container that has a (priori unknown) number of children that have a minimum width. When I resize the browser past the point of children shrinking, the parent background shrinks with the window, and does not cover children.

.row{
    display:flex;
    background-color:#fcc;
    background-size:cover;
}
.row:nth-child(odd){
    background-color:#fbb;
}
.child{
    min-width:150px;
    border:1px #ccc solid;
    flex-grow:1;
}

<div class="row">
    <div class="child"> content </div>
    <div class="child"> content </div>
    <div class="child"> content </div>
</div>
<!--more rows follow-->

jsfiddle

How would I go about ensuring the parent background covers all the children?

I tried putting width:100%, background-size:cover on the .row element. Also tried wrapping everything in a container and setting overflow:auto on that.

The only way I can sort of get it work is if i put overflow:auto on the .row element, but then it makes each row horizontally-scrollable independent of others.

I already saw this post, but it's not exactly what I need - I'm not wrapping any flex-items, the point is for them to stay the way they are.

I also read this article, but I can't see anything that can help with my problem.

Upvotes: 1

Views: 532

Answers (1)

Maciej A. Czyzewski
Maciej A. Czyzewski

Reputation: 1529

You probably want display: inline-flex;

Check: https://jsfiddle.net/n5s3n3g8/1/

Upvotes: 3

Related Questions