Div affected by flex - Level Extreme

Level Extreme platform

Subscription

Corporate profile

Products & Services

Support

Legal

Français

Div affected by flex

Message

From

23/03/2019 03:49:26

Michel Fournier
Level Extreme Inc.
Petit-Rocher, New Brunswick, Canada

All

General information

Forum:

HTML5

Category:

CSS

Title:

Div affected by flex

Miscellaneous

Thread ID:

01667502

Message ID:

01667502

Views:

In IE, the div style seems to be affected when the usage of flex applies.

In this code, you will see a large gap at the bottom. This is happening only in IE. The more div tags I add, the more the gap is. This only applies when divs are used. With regular text, I can have tons of paragraph and no gap will apply.

Anyone would know how to explain this and what has to be added in the .Main style to avoid this?

<!DOCTYPE html>
<html>
<head>

<style>
html
{
   height: 100%;
}

body
{
   padding: 0px;
   margin: 0px;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.Main
{
   text-align: center;
   width: 100%;
   flex: 1 0 auto;
}

.Footer
{
   background-color: #aaaaaa;
   width: 100%;
   min-height: 80px;
   flex-shrink: 0;
}
</style>
</head>

<body>

<div class="Main">

<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>
<div><input type="text" style="width: 1300px;"></div>

</div>

<div class="Footer"></div>

</body>
</html>

Michel Fournier
Level Extreme Inc.
Designer, architect, owner of the Level Extreme Platform
Subscribe to the site at https://www.levelextreme.com/Home/DataEntry?Activator=55&NoStore=303
Subscription benefits https://www.levelextreme.com/Home/ViewPage?Activator=7&ID=52

Map

View

Click here to load this message in the networking platform