1

I have a Flexbox container that's part of a two column container. This all looks good in Chrome, FF, etc except IE11. It has two children: 

.container 
  h3 Title
  p body

and my container:

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 45px 25px;
position: relative;

and it looks like this in IE11:

enter image description here

where it's cut off on both sides.

I've tried adding flex-basis, flex: 0 1 [...], max-width, overflow: hidden but to no avail. It still won't stop the cut offs. Is there anything i'm doing wrong?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nyphur
  • 2,404
  • 2
  • 24
  • 48

1 Answers1

0

I fixed it. Weirdly adding width: 100% to my p tag fixes it.

nyphur
  • 2,404
  • 2
  • 24
  • 48