Flex basis 100% in column flexbox: full height in Firefox, not in Chrome

Question

I would like a column of divs, of any number, each with width 100% and height 100% of their parent div, so one is visible initially, and the others overflow the parent downw

Answer 1

As stated in Abhitalks response, there is a bug (or a different interpretation of the standard) in the way Chrome handles the height attribute here.

I have found a hack that is working both in Chrome FF and IE

The only issue is that you ned to have as many rules as posible children there are.

The trick is to set the flex-direction to row, set the flex-basis (that is now the width) to 100%, and then translate the elements

.container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 80px;
    background-color: lightgreen;
    transition: flex 1s;
}

.container:hover .filler {
    flex: 0 0 40px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

.child {
    background-color: rgba(200, 0, 0, 0.26);
    flex: 0 0 100%; 
}

.child:nth-child(2) {
    background-color: rgba(255, 255, 0, 0.48);
    transform: translateX(-100%) translateY(100%);
}

.child:nth-child(3) {
    background-color: rgba(173, 216, 230, 0.28);
    transform: translateX(-200%) translateY(200%);
}

    

    

    

    	   
1
    	   
2
    	   
3
    

If there could be another child, you would need a nth-child(4) rule, and so on

I have added an hover effect to check how the size adapts