Ways to expand flexbox to occupy the entire container

I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficulties in making both flexboxes expand vertically to occupy the full container height.

Here is the HTML code:

<div class="container-fluid" id="mainContainerAboutUs">
    <div class="row">
        <div class="col-lg" id = "aboutUsLeft">
            <img src = {% static 'media/cover.jpg' %} alt = 'About us' id = "aboutUsLeftImage">
        </div>
        
        <div class="col-lg" id = "aboutUsRight">
                <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>           
        </div>
    </div>
</div>

And here is the CSS code:

/*About us section */
#mainContainerAboutUs {
    align-items: stretch;
    display: flex;
} 

#aboutUsLeft {
    padding: 0px;
    border: 5px solid grey;
}

#aboutUsLeftImage {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#aboutUsRight {
    justify-content: center;
    border: 5px solid grey;
}

#aboutUsLogo {
    width: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#aboutUsRightHeader {text-align: center;}

I've tried using align-items: stretch as suggested by sources online, but it's not working for me in this case. My goal, shown by the arrow in the image linked below, is to have both flexboxes expand to fill the entire container height.https://i.sstatic.net/3jydL.jpg

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

You've applied align-items: stretch to the wrong element; it should be on the row that contains the flex items. Update your CSS like this:

#mainContainerAboutUs .row {
    align-items: stretch;
}

OR

If you're using Bootstrap 4, adjust your HTML code as shown below:

<div class="container-fluid" id="mainContainerAboutUs">
    <div class="row align-items-stretch">
        <div class="col-lg" id = "aboutUsLeft">
            <img src = {% static 'media/cover.jpg' %} alt = 'About us' id = "aboutUsLeftImage">
        </div>
        
        <div class="col-lg" id = "aboutUsRight">
                <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>           
        </div>
    </div>
</div>

Answer №2

After investigation, I discovered that the empty white space at the top of the container was caused by some
tags in the preceding HTML section. Adding border: 5px red solid to the CSS helped me visualize the container box and flex boxes, making debugging much easier.

Although I made revisions to the code below, I am still facing one issue. When I narrow the browser window width, the image disappears.

HTML:

<div class="container-fluid" id = "aboutUsContainer">
    <div class="row" id="firstRow">
        <img src = {% static 'media/cover.jpg' %} class="col-lg" alt = 'About us' id = "aboutUsLeftImage">

        <div class="col-lg" id="right"> 
            <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>
        </div>
    </div>

CSS:

.row {
    display: flex;
}

#aboutUsLeftImage {
  object-fit: cover;
  flex: 1;
  overflow: hidden;
  height: 500px;
  padding: 0px;
}

#aboutUsLogo {
    width: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#aboutUsRightHeader {text-align: center;}

I removed the flexbox div on my left image assuming that the img tag alone acted as a flexbox. However, the image disappeared when narrowing the browser window. I'm puzzled about this behavior.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use an angular expression as the ng-click function?

I have been searching everywhere for the answer to this question. Within my code, there is an angular object called column.addOnParams. This object includes a child element named rowClick, which can be accessed using column.addOnParams.rowClick. The val ...

javascriptjqueryhtmlangularjs

How can I make my Twitter Bootstrap carousel actually start "carousel"-ing?

I often find myself in over my head with programming, but I am giving it my best shot. Please be patient with me! Recently, I followed a tutorial on YouTube to create a carousel in my Django project. Unfortunately, instead of displaying one image at a ti ...

htmldjangotwitter-bootstrapcarousel

Using PHP to download a file

I have successfully uploaded a PDF file to a directory named 'documents' on my web server. Currently, I am populating a table with data from my database, and I want to create links in the forms column that directly link to the associated files w ...

phphtml

Engaging JavaScript Navigation

I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...

javascripthtmlcss

Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling: .condition-table { background-color: #e1f5fe70; } The styling seems to work fine so far. However, when I added this additional CSS: .co ...

cssvue.jsvuejs2vue-componentvuetify.js

I am encountering an issue where the key is not located in the response array in PHP, causing my JavaScript chart to remain

Hey there! I'm currently working on a school project and could really use some assistance. The task at hand involves creating a web interface that can interact with an endpoint in order to: - Authenticate a registered user to retrieve an authenticati ...

javascriptphphtmlhighcharts

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...

javascripthtmlcssvideoyoutube

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

I am facing an issue with aligning two items (an input text and an image) within a cell of a table. Despite trying various methods like using vertical-align:middle, margin top, padding, and setting height to 100%, I haven't been able to achieve the de ...

htmlcssvertical-alignmentcss-tables

Targeting child elements with CSS selectors

In my ecommerce software, I have a menu that I want to customize by making the main categories bold. I have attempted various methods, including the ones shown below, but I am struggling to target the correct elements (specifically those in capital letter ...

htmlcsscss-selectors

Switching the body's background image dynamically using javascript

I'm attempting to switch up the background image using JavaScript. Here's how I've defined the background: body { background: black; overflow-x: hidden; overflow-y: hidden; } body:before { overflow-x: hidden; overflow ...

javascripthtmlcss

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

I'm currently developing an Angular form with multiple label-input field combinations. I have managed to style the labels and input fields with inline block so that they appear on the same row. However, I am facing a challenge in aligning the label to ...

htmlcssangular

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...

htmlcssdrop-down-menu

Scale up each image with the use of Java script

I have a main container with three different sub-containers, each containing an image and text. I want to achieve the effect of zooming in on the image of the specific sub-container when hovering over it. Currently, when I hover over any sub-container, all ...

javascriptjqueryhtml

Is it true that by utilizing Vue's v-for, every line of HTML code becomes a

I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...

javascripthtmlvue.js

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

htmlcsscss-tables

Bringing in CSS variables to a Typescript document

In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...

javascriptcssreactjstypescriptmobx

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser

Incorporating an HTML file into a DIV container while also displaying menu links

I am facing a major challenge with what I recognize as a relatively simple issue for experts. As someone who is still learning, I am struggling to create menu links that load an HTML file into a specific DIV. Despite my efforts, the content keeps loading i ...

javascripthtmlloadinghref

generate an electronic communication using an HTML and PHP template

Currently, I am working on a PHP web application that requires sending emails in HTML format. To achieve this, I am utilizing the mail() function. My goal is to send emails based on a template file that is formatted in HTML and includes segments of PHP ...

phphtmlemailtemplates