Is there a way to apply height:100% to a child element within a flex item with flex-grow:1?

Why is the height:100% property not working as expected for a child element of a flex item that also acts as a flex container with flex-grow:1?

The intention was to have the child element take on the full height of its parent (the one with flex-grow:1), but it seems my understanding is incorrect. I am curious to know the specific implications of setting height:100% in this scenario. Why does the element not expand to fill its parent's height with this property?

This is the relevant HTML (Bootstrap required)

<div class="container-fluid flex-content">
    <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid row flex-grow-this">
        <aside class="col-2 project-manager">
            sek
        </aside>
        <section class="col-10 to-do-list">

        </section>
    </div>
</div><!--end of main div-->
htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

There are a number of benefits that come from tidying up the code and properly utilizing the Bootstrap grid system. The desired layout should go like this: container-fluid > row > columns. Avoid using nested containers. Extra CSS for flexbox and height is unnecessary as Bootstrap 4 provides Utility classes such as:

  • flex-grow-1
  • d-flex flex-column
  • vh-100

Simply add CSS for colors, borders, and padding...

.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
}

Then just use this HTML structure...

<div class="d-flex flex-column vh-100">
    <header class="theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid d-flex flex-column flex-grow-1">
        <div class="row flex-grow-1">
            <aside class="col-2 project-manager">
                aside
            </aside>
            <section class="col-10 to-do-list">

            </section>
        </div>
    </div>
</div>

Note: applying height:100% to the child col-2 will actually prevent it from filling the parent's height. Ensure that the parent row has flex-grow-1

Check out this demo:

Answer №2

Consider including the h-100 class in the parent div for optimal results

<div class="container-fluid flex-content">
      <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
      </header>
      <div class="container-fluid row flex-grow-this h-100" >
        <aside class="col-2 project-manager">
                    sek
                </aside>
        <section class="col-10 to-do-list">
asd
                </section>
      </div>
    </div>

Do you find this meets your expectations?

Answer №3

One common reason for space at the top of a webpage is not setting the margin and padding of the body element to zero. Refer to the code snippet below for an example.

body {
  padding:0;
  margin:0;
}
.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
    height: 100%;
}

.flex-content {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

.flex-grow-this {
    flex-grow: 1;
}
<div class="container-fluid flex-content">
    <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid row flex-grow-this">
        <aside class="col-2 project-manager">
            sek
        </aside>
        <section class="col-10 to-do-list">

        </section>
    </div>
</div><!--end of main div-->

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

What could be the reason for my navbar menu getting cropped?

I have been tasked with making modifications to a website that was created using Bootstrap v3.3.7. The site includes a navbar (HTML provided below) that appears fine. However, I needed to add a dropdown item to the navbar, which I did by following the guid ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Unable to modify variable values in AngularJS

I'm currently utilizing AngularJS along with the "Angular Material" implementation (found here: https://material.angularjs.org/latest/#/) One of the components I'm using is the SideNav component: https://material.angularjs.org/latest/#/demo/mate ...

javascripthtmlangularjs

Is there a way to have text entered in a single text field automatically duplicated in multiple text fields simultaneously?

Currently, I have the following code that copies data from one text field to another. However, I would like to implement this functionality across multiple fields (more than four): <script type="text/javascript"> function copyData(from,to) { t ...

javascripthtml

AngularJS: dynamic autocomplete field with scroll functionality

This is my HTML code: <div class="form-group"> <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label> <div class='col-md-4'> ...

cssangularjstypeahead.jsbootstrap-typeaheadtwitter-typeahead

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

javascripthtml

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

htmlcssfirefox3dperspective

What is the best way to attach a single block of Javascript code to different div elements without executing them simultaneously?

Running a small ecommerce shop, I have designed product cards using HTML, CSS, and a bit of Jquery for animations. However, a problem arises when clicking the "add to cart" button on any product card as it adds all items to the cart and triggers animations ...

javascripthtmljquerycsse-commerce

Layering Image Divs in Bootstrap 5 for a Dynamic Responsive Layout

My current project involves working with a Bootstrap 5 template that includes a carousel within a card body. This design is responsive and functions correctly across desktop, tablet, and PC viewports. However, I now need to overlay and stack multiple divs ...

csscss-positionoverlaybootstrap-5

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

androidhtmlangularjswebprogressive

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

I am facing an issue with my webpage where I extract the html, transmit it via websockets using socket.io to another page containing an empty iframe, and then inject the html dynamically into the iframe. My code for injecting the html looks like this: fr ...

jquerycssdebuggingnode.jsiframe

Controlling the angular bootstrap modal form with ease

I am having trouble accessing the form in the modal controller (Plunkr). The variable myForm doesn't seem to be accessible. How can I make the alert call work correctly: angular.module('plunker', ['ui.bootstrap']); var ModalDemoCt ...

javascriptangularjstwitter-bootstrap

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

htmlcss

Delete the selected background color from custom drop-down lists in versions of Internet Explorer 9 and earlier

In my asp.net application, I have a dropdown element. I am trying to remove the default blue background color that appears when the dropdown is selected, as shown in the image below. I have tried all the solutions provided in this link, but none of them s ...

javascriptcssasp.net

Textfield with autocomplete dropdown

I have a text field on my website that needs to work as an autocomplete box. I have included the following code in the "headerbar" section of my page: Find :<input type="text" class="input2" style="margin-bottom:0px;" id="customersearchfield"> < ...

css

Encountering an issue while attempting to send an image through JavaScript, jQuery, and PHP

I'm currently attempting to upload an image using JavaScript/jQuery, but I am unsure of how to retrieve the image in order to send it to a server (PHP). I have a form containing all the necessary information that I want to save in MySQL, and I use jQu ...

javascriptphpjqueryhtmldom

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

Potential Issue with CSS General Sibling Selector

It seems like I have encountered a potential bug with the General Sibling Selector. When I use p ~ div, the selector does not work as expected. However, when I replace p with the specific class name text_paragraph, it works fine. You can view my code and f ...

htmlcss

Fixing border prioritization in a table using the CSS style "border-collapse: collapse"

I have encountered a problem where certain borders take precedence over others when using the border-collapse: collapse styling in a table. Specifically, when setting the border-right on a cell, it appears above the border-left. Is there a way to adjust th ...

javascripthtmlcsshtml-table

What is the best way to vertically center these two boxes within the confines of this red box?

Is there a way to vertically align the white and green boxes inside the red box? I'm aiming for a layout similar to the one shown in the image below. Your help is greatly appreciated! Check out this demo on jsfiddle. <style> *{ padd ...

htmlcss