View to fill vertically remaining space from parent .css

Question

This is what I am trying to achieve

This is what I have done so far

I have this image on the left with fixed height.

The left one I have managed to match that height with the aqua color.

Then I have the blue one on the right column and I want to have another green one below that fills all the remaining space vertically, but my green view is not expanding.

Here is my code:

<div class="full-page">
    <div class="display-row">
        <div class="col-lg-5 age-update rounded-border">
            <div class="image-container"></div>
        </div>
        <div class="col-lg-7 ml-15 scale-height">
            <div class="info-banner rounded-border">
                <div>
                    <p>Free Civ Pool</p>
                </div>
                <div>
                    <p>Rotation Aug 18th</p>
                </div>
            </div>
            <div class="events-banner rounded-border"></div>
        </div>
    </div> </div>

and here is my .css

.full-page {
    margin: auto;
    width: 95%;
}

.full-page p {
    color: white;
}

.display-row {
    display: flex;
}

.rounded-border {
    border-color: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 15px;
}

.age-update {
    position: relative;
    /* Set the desired reduced height for the container */
    height: 300px; /* Adjust the value as needed */
    overflow: hidden; /* Hide any overflow from the image */
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('src\assets\images\age3update.jpg');
    background-size: cover;
    background-position: center;
}

.scale-height {
    flex-grow: 1;
    background-color: aqua;
}

.info-banner {
    background-color: blue;
    height: min-content;
}

.events-banner {
    flex-grow: 1;
    flex-direction: column;
    background-color: rgb(81, 255, 0);
}

I am really new .css and I am trying to learn some concepts.

"but my green view is not expanding" what does this mean? If you want it green just change `background-color: aqua;` to `background-color: green;` — André, Aug 28 '23 at 15:11
I want this
to expand to fill the remaining space vertically — Gustavo Baiocchi Costa, Aug 28 '23 at 15:14
I added a solution, let me know if it helps. It seems you were half way there already. — André, Aug 28 '23 at 15:22
then I added flex-direction: column; and it worked, thanks @André — Gustavo Baiocchi Costa, Aug 28 '23 at 15:52

score 0 · Accepted Answer · answered Aug 28 '23 at 15:19

0

The best way to achieve this is with Flexbox: Make scale-height a flex element with flex direction column.

.scale-height {
    flex-grow: 1;
    background-color: aqua;
    display: flex;
    flex-direction: column;
}

And that is all, because you already added flex-grow: 1; to events .events-banner.

answered Aug 28 '23 at 15:19

André

1,602
2
12
26

Since you are new to CSS I will also suggest you check https://flexboxfroggy.com/. – André Aug 28 '23 at 15:20

View to fill vertically remaining space from parent .css

1 Answers1