IE bug with flexbox [duplicate] - html

Question

This question already has answers here:
flex property not working in IE
(5 answers)
Closed 5 years ago.
I have two containers with a width of 50% displayed in a row. In the left container, there is an image. In the right container, there is a title, a text-box with some text and a button displayed in a column. The text-box has a fix width and text with many lines will be hidden. In chrome, mozilla and edge it seems to be fine, but in IE the box does not grow with de content. I think something must be wrong with flexbox. Any ideas? Here is the fiddle: https://jsfiddle.net/oago4ynb/2/
Also a snippet right here:
.wrapper {
display: flex;
padding: 0px 20px 0px;
border: 1px solid red;
}
.image-container {
width: 50%;
position: relative;
overflow: hidden;
padding: 0;
}
img {
height: 100%;
width: auto;
min-width: 100%;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.content {
width: 50%;
display: flex;
flex-direction: column;
padding: 9px 30px 30px;
}
.text {
flex: 1;
}
p {
overflow: hidden;
height: 100px;
}
<div class="wrapper">
<div class="image-container">
<img src="https://dummyimage.com/hd1080" alt="Image">
</div>
<div class="content">
<div class="title">
<h3>Title</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet
consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing
elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere veroLorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat
optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil
numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!!</p>
</div>
<div class="button">
<button>Click me!</button>
</div>
</div>
</div>

Answer 1

SOLUTION:
The problem was the flex: 1; on the .text class. Internet Explorer has problem with flex and just one value. Other browser understand it, but if you use flex property on IE, you have to write all three values out so the solution will be flex: 1 0 auto; for my issue. You can use also just one value, but then you have to use the specific property, which would be for this case flex-grow: 1;. Both solution will work. FYI: There is also a knewn issue with this example: flex: 1 1 0; or flex: 1 0 0;. All browsers will understand the third value for flex-basis which is in this two cases 0. In IE you have to write 0px, otherways you'll have problems. Here is the fiddle with both solutions: https://jsfiddle.net/oago4ynb/5/
Thanks!