Is there a way to stack divs on top of each other using flexbox syntax?

Question

Flexbox issue. Hopefully someone can help :)

I'm trying to build a deck of cards made of divs and stack them over each other like you would using position:absolute.

Is there any way to get divs to overlay each other in the same space using flexbox?

Solution 1

One way to get it is to set a negative margin. A deck of cards using it:

.deck {
    display: flex;
    height: 200px;
    flex-direction: column;
}

.card {
    height: 100px;
    width: 60px;
    flex: 100px 1 0;
    border: solid 1px black;
    border-radius: 5px;
    margin-bottom: -80px;
    background-color: white;
    box-shadow: 3px 3px 3px gray;
}

<div class="deck">
<div class="card">1</div>    
<div class="card">2</div>    
<div class="card">3</div>    
<div class="card">4</div>    
<div class="card">5</div>    
</div>

Solution 2

I would need to have some code from you and more information, but I think it's possible.

If you want to do it solitaire way:

Just add overflow hidden to cards on top and max-height let's say 20px.

Last one should have no max-height and overflow:auto.

However thing that you are doing it's probably easier to do without flexbox. Flexbox can be used with position:abosolute too. They are different attributes. Give some examples of what are you trying to accomplish maybe I will be able to help.

Comments

[ian]

Thanks for taking the time to answer this with a good example.

[vals]

Happy that it helped you !