JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<div class="flex-container">
    <div class="box1"></div>
    <div class="box2">
        <div class="full-size">Div 100%</div>
    </div>
</div>

<div class="flex-container">
    <div class="box1"></div>
    <div class="box2">
        <svg viewbox="0 0 1 1" preserveAspectRatio="none">
            <rect width="1" height="1"></rect>
        </svg>
    </div>
</div>

SCSS

.flex-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 50px;
    margin-bottom: 50px;
}

.box1 {
    width: 50px;
    height: 50px;
    background-color: gold;
}

.box2 {
    flex: 1;
    position: relative;
    .full-size {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: lime;
    }
    svg {
        height: 100%;
        width: 100%;
    }
    svg rect {
        fill: lime;
    }
}