I am encountering some issues with certain styles that are functioning correctly in Chrome and Firefox but not in IE.
The main problem I am facing is that a specific style that works fine in Chrome does not wrap text into the column in IE.
To reproduce this problem, check out this fiddle first in Chrome or Firefox, and then in IE.
https://i.sstatic.net/j8R7s.png
For easier testing, you can try it directly from here:
.Container {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.row {
flex-direction: row;
}
.jc-center {
justify-content: center;
}
.column-item-x2 {
width: 50%;
}
.jc-start {
justify-content: flex-start;
}
.resume-item {
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 7px;
display: inline-block;
position: relative;
font-size: medium;
right: 15px;
}
.dot {
position: relative...
<div id="resume" class="Container column" style=" margin-top: 50px;">
<span style="textAlign: left; fontSize: 40px; color: red;">
<input type="checkbox" id="Resume-chk" style="display: none;" />
<b id="Resume-title">RESUME</b>
</span>
<hr />
<div class="Container row jc-center" style="margin-top: 30px;">
<div class="Container column jc-start column-item-x2" id="professional" style="color: red;">
<div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
<div style="text-align: left;">
<h2 style="color: red;">PROFESSIONAL</h2>
<div class="Container column">
<div class="Container row">
<div class="dot" style="background-color: red;"></div>
<div style={{ position: "relative" }}>
<span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b>&...