How fix bug in ie11?

Question

Is there any hack to remove the huge distance between the picture and the title in ie11? Now in ie11 I have got a huge distance. How fix this in ie11? Thank you...................................................................................................................................................................................................

*,
::after,
::before {
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left; }

body {
  margin: 0; }

.wrapper {
 display: flex;
 flex-direction: column;
}

img {
  max-width: 100%;
  vertical-align: middle; }

.main-content {
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
    flex: 1 1 0%;
    width: 100%;
    max-width: calc(100% - 20px - 0.02px);
    order: 1;
    /*min-height: 640px;
 height: 640px;*/
}

.card {
  display: flex;
  flex-direction: column;
  background: #e4e6e8; 
}

.card {
  position: relative;
  margin-right: 10px;
  margin-left: 10px;
  flex: 0 0 calc(100% - 20px - 0.02px);
  width: 100%;
  max-width: calc(100% - 20px - 0.02px);
  margin-bottom: 20px;
}

@media (min-width: 992px) {
    .card {
     flex: 0 0 auto;
     width: 100%;
     max-width: calc(33.33333% - 20px - 0.02px);
 }
}

.card-head img {
  max-width: 100%; 
}
.card-head a {
  display: block; 
}
.card-body {
  flex-grow: 1;
  margin: .5em 1em; 
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5px;
  margin-left: -0.5px; 
}
.card-foot > * {
  position: relative;
  margin-right: 0.5px;
  margin-left: 0.5px;
  flex: 1 1 0%;
  width: 100%;
  max-width: calc(100% - 1px - 0.02px); 
}
.cardList {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
  margin-bottom: calc(3rem - 20px);
  min-height: 640px;
  height: 640px;
}

<div class="main-content">

 <div class="cardList">
  <div class="card">
   <div class="card-head">
    <a href="detail.html"><img src="https://bainuo.github.io/1.svg" alt=""></a>
   </div>
   <div class="card-body">
    <h4 class="card-title">Title</h4>
    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis</p>
   </div>
   <div class="card-foot">
    <a href="#">Buy</a>
    <a href="#">Detail</a>
   </div>
  </div>
 </div>

</div>

Possible duplicate of [Full-screen responsive background image](https://stackoverflow.com/questions/16548338/full-screen-responsive-background-image) — Ronnie Oosting, Aug 08 '18 at 12:49
Do not set flex property to the body. Make div element 'wrapper' which will take that property — Observer, Aug 08 '18 at 12:53

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

I suggest you to take a look at https://caniuse.com/#search=flex

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. See bug.

IE 11 does not vertically align items correctly when min-height is used

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 08 '18 at 12:57

Dasten Duranin

91
6

I'm set height property to container with with display: flex and flex-direction: column (.card). In ie11 looks that: https://i.stack.imgur.com/Iew0c.png – Dan Aug 08 '18 at 13:35
Try to define the flexes properties on .cardList and not before (or maybe main-content) – Dasten Duranin Aug 08 '18 at 13:43
Thats don't work in ie11 correctly. I'm update my code – Dan Aug 08 '18 at 13:52

How fix bug in ie11?

1 Answers1