IE11 div height is not calculated correctly
Question
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.
3 answers
solution1
2 2017-08-01 06:24:03
从您的.container css删除flex:1解决了该问题
solution2
2 ACCPTED 2017-08-01 06:38:06
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>
solution3
1 2017-08-01 06:24:13
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
DIV with max height of body and flex does not work correctly on IE11
Div height differs to what is declared on the property in IE11 only
IE11 table-cell height
Bootstrap 4 navbar not rendering correctly in IE11
dataTransfer not working correctly in IE11
iFrame displaying outside div in IE11
SVG not center in div on IE11
Div with margin and width breaks in IE11
Form not staying within a DIV (Works in IE 9 but not Chrome or IE11)
DIV with max-height and overflow-y causes IE11 to enable window's vertical scroll-bar — why?
Related Tags