CODEWITHSUNDEEP
cssflexbox
Mark Boulder
Mark Boulder

Reputation: 14277

Flexboxes overlapping instead of pushing aside?

If you hover the green box at:

http://jsfiddle.net/frank_o/YS5QN/3/

It will expand and squeeze out the blue box. Is there a way to make it overlap the blue box instead, so the blue box remains in place?

HTML:

<div class="container">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

CSS:

.container {
    display: flex;
}
.column_1 {
    flex: 1;
    height: 60px;
    background: blue;
}
.column_2 {
    width: 120px;
    height: 30px;
    background: green;
}

jQuery:

$('.column_2').hoverIntent({
    over: function () {
        $(this).animate({
            width: '100%'
        }, 500);
    },
    out: function () {
        $(this).animate({
            width: '120px'
        }, 500);
    },
    timeout: 300
});

Upvotes: 2

Views: 6688

Answers (1)

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

I think you are mis-using display:flex.
Maybe try using width:calc() and position:absolute;

Try this out:

demo

Also, I wanted to show you how you can animate that box without using jQuery

.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 30px;
    background: green;

    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}

.column_2:hover {
    width: 100%;
}

demo

Upvotes: 3

Related Questions