The elusive Holy Grail layout for Flex content cannot be achieved on IE11

UPDATE I attempted to insert height:100vh into the .app-container, but unfortunately, it did not have the desired effect.

I am utilizing bootstrap 4 for creating my web application. My goal is to implement the Holy grail layout.

Everything appears to be working correctly on Chrome, however, when testing on IE 11:

https://i.sstatic.net/GI61Z.png

However, the layout display in IE 11 is different:

https://i.sstatic.net/b1Acv.png

The green section does not grow as intended in Chrome.

Below are the classes from my layout.scss that I am using:

.app-container {
  
  // Other CSS classes here

}

// More CSS code

If you need more information or want to view the complete code, check out my codepen

Please assist if you can. Thank you!

csssassresponsive-designflexboxbootstrap-4

Answer №1

If you're facing this issue, one solution is to assign a specific height to the flex container by using height: 100vh; instead of min-height: 100vh;. This adjustment addresses an IE11 bug where containers with display: flex and flex-direction: column may not properly calculate their children's sizes without an explicit height property.

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property https://caniuse.com/#search=flex

Additionally, make sure to include flex-shrink: 0; or use the shorthand flex: 1 0 auto; within your .app-content-container.

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /*min-height: 100vh;*/
}
.app-container .app-navigation-bar-container {
  flex: none;
  margin-bottom: 5px;
}
...

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body style="min-height: 100%;" _nghost-c0="" ng-version="6.1.9">
    <router-outlet _ngcontent-c0=""></router-outlet>
    ...
    </authorize-layout>
</body>

This advice has been tested on IE11, Firefox, and Chrome. We hope it provides some assistance. :)

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

Transferring an image between two <td> cells within the same table

For a project, I'm working on creating a Checkers game. I have the checker board and pieces ready, but I'm struggling with the movement logic. My goal is to enable the image to move or transfer from one td element to another when clicked. A frie ...

javascriptphpjqueryhtmlcss

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

javascriptjquerycsscss-transformswebkit-transform

Establish the Cascading Style Sheets for the Drawer-AppBar component in Material UI for React

Whenever I deploy my navbar, the 'PieDePagina' component shifts to the bottom by 144px (as defined in the STYLE.contentStyleActive). This issue is caused by the CSS modification, but I am unsure of how to resolve it. Another query I have is how ...

jquerycssreactjsmaterial-ui

Utilizing block buttons within a div containing a Bootstrap button group

My dilemma is trying to center a button group within a container while also making each button occupy half of the container's width. I've attempted using "w-50" and "btn-block," but they don't seem to work when in conjunction with "btn-group ...

cssbootstrap-4

CSS - How can text and images be effectively combined for a visually appealing design?

We're tasked with designing text in the following format: Text in English XXX Text in English XXX Text in English. The XXX placeholders need to be replaced with images that have the same height as the English text. Is there a better solution for th ...

css

Closing the Bootstrap Dropdown Menu

I have a dropdown menu in my bootstrap project. I am looking for a way to make the menu close when I click on one of the menu items, without refreshing the page. The links function like an ajax request model, ensuring that the page does not reload. <l ...

jqueryhtmlcsstwitter-bootstrap

Replace Nebular theme with a new design for a single component

I am currently using Nebular in my Angular application and I am trying to figure out how to customize the theme settings for a specific component on just one page, without affecting other instances of the same component that are using the default settings. ...

angularsasssidebarnebular

Choose a specific portion of text following an element in HTML using CSS

I would like to style the text following the span tag using CSS without affecting the span tag itself. Specifically, I want to apply styling only to the text that reads "Text to be selected", leaving the span tag unaffected. The style I desire i ...

csscss-selectors

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss

Modern design featuring soft borders that blend into the background

I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I ai ...

htmlcsslayoutfluid

Using nextJS to establish a context within a Server Component and incorporating a new library

I attempted to incorporate Framer Motion into my project, but when I added it, an error occurred. The error message displayed was: TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Fo ...

javascripthtmlcssreactjsnext.js

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

Is there a way to include a text file in HTML for referencing or posting on my website?

Managing a website where my colleagues frequently post updates can be time-consuming as I am the only one knowledgeable in html and css. I find myself constantly formatting their posts and creating new pages for them. I am exploring ways to simplify this ...

javascriptphpjqueryhtmlcss

Troubleshooting: Images not displaying properly in React due to Webpack configuration bottleneck,

I am facing an issue with loading images in my React application. Some images are set up in the CSS file like this: background-image: url('/../img/logo.png'); On the other hand, I would like to use images inside React components using the img ...

htmlcssreactjswebpack

Steer clear of dividing words

I am attempting to showcase sentences letter by letter with a fade in/fade out effect. However, I am facing an issue where words break in the middle. How can this word breaking be prevented? var quotes = document.getElementsByClassName('quote' ...

javascripthtmlcsseffects

Guide on implementing various styles for a class in Tailwind CSS when transitioning to dark mode with the help of Next.js 13.4 and next-theme

Is it possible to apply unique styles for a class in Tailwind CSS when transitioning to dark mode using Next.js 13.4 and next-theme? I am currently setting up a dark theme in Tailwind CSS with Next.js 13.4 utilizing next-theme. Within my globals.css file, ...

cssreactjsnext.jstailwind-css

Issue with the alignment of cards in the group of cards

Struggling to align the bottom sections of these elements. Despite consulting Bootstrap references, I can't figure out what's causing this misalignment. I thought using the card-group class would align the bottoms of its children, but it doesn&a ...

angularbootstrap-4

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

cssgoogle-fonts

Using Django Form with Bootstrap: Incorporating CSS classes and <div> elements

I am currently implementing Twitter Bootstrap with Django to style forms. Bootstrap can enhance the appearance of forms, but it requires specific CSS classes to be included. My challenge lies in the fact that Django's generated forms using {{ form.a ...

cssdjangotwitter-bootstrap