18 replies

Flex sizing

✅solved

front-end

I have a flex container (generated by angular material), in column mode, and with a fixed size. I put two children inside it : the content and the footer.
I want the footer to be 14.3% of the container's height.

Instead, it is the size of its text contents. Can someone tell me what I'm doing wrong ?
My code :

    mat-card-content {
        background-image: linear-gradient(#311507, var(--card-color-red, #ce3f17));
        flex: 1 1 auto;
    }

    mat-card-footer {
        background-color: #09132b;
        flex: 0 0 14.3%;
        min-height: 14.3%;
    }

    mat-card-content {
        background-image: linear-gradient(#311507, var(--card-color-red, #ce3f17));
        flex: 1 1 auto;
    }

    mat-card-footer {
        background-color: #09132b;
        flex: 0 0 14.3%;
        min-height: 14.3%;
    }

this is clearly not 14.3%

KP-C

Kevin Powell - Community•2mo ago•

18 replies

Gouvernathor

Flex sizing

✅solved

front-end

    mat-card-content {
        background-image: linear-gradient(#311507, var(--card-color-red, #ce3f17));
        flex: 1 1 auto;
    }

    mat-card-footer {
        background-color: #09132b;
        flex: 0 0 14.3%;
        min-height: 14.3%;
    }

    mat-card-content {
        background-image: linear-gradient(#311507, var(--card-color-red, #ce3f17));
        flex: 1 1 auto;
    }

    mat-card-footer {
        background-color: #09132b;
        flex: 0 0 14.3%;
        min-height: 14.3%;
    }

this is clearly not 14.3%

Flex sizing

Similar Threads

Flex sizing

Similar Threads

Similar Threads

Similar Threads