CODEWITHSUNDEEP
htmlcssinternet-explorer-11
ke3pup
ke3pup

Reputation: 1895

IE11 div height is not calculated correctly

I have the following code snippet which renders perfectly fine on chrome, however on IE11 the height of .wrapper div element isn't being calculated correctly.

what would the fix for IE11 entail? I've tried looking around for fixes but couldn't find the one that definitively fixes this issue.

Upvotes: 0

Views: 2975

Answers (3)

Dhaarani
Dhaarani

Reputation: 1360

Remove display:flex; flex;1 css line for selector .container

body {
  background-color: gray;
}


.wrapper {
    display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  background-image: linear-gradient(90deg, #f17e5d 35%, #f6d365 100%);
  padding: 80px 0px;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
}

.container {
    background: #fff;
  padding: 20px;
  border-radius: 4px;
  justify-content: center;
  align-self: center;
  width: 455px;
  top: 5px;
  position: relative;
  flex-direction: column;
}

.headline {
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.orderedList {
    font-style: italic;
  font-size: 16px;
  color: black;
  padding: 18px;
  position: relative;
  top: -28px;
  margin: 0;
}

.listItem {
  padding: 0 5px;
}

.listContent {
    padding: 1px;
  font-style: normal;
  color: black;
  margin-left: 5px;
  white-space: pre-line;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="headline">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
  </div>
  
  <div class="wrapper">
    
    <div class="container">
      <ol class="orderedList">
        <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
                <li class="listItem">
          <p class="listContent">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to 
          </p>
        </li>
      </ol>
      
    </div>
  </div>
</body>
</html>

Upvotes: 2

Potray
Potray

Reputation: 1998

As https://caniuse.com/#search=flexbox (see Known Issues):

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.

Upvotes: 1

Supraja Ganji
Supraja Ganji

Reputation: 1207

removing flex:1 from your .container css solved the issue

Upvotes: 2

Related Questions