When viewing the code below, everything appears correctly in Chrome. The width of the .inner element is limited by max-width.
However, in IE11, the .inner element expands to fit all content.
If I were to set display: block for either the .container or .inner element, everything works as expected. But this solution is not viable as the issue is within a larger component used across multiple sites, and I do not want to risk breaking anything.
- Why is this happening?
- Is there a way to resolve this issue without changing the display properties?
.container {
background-color: yellow;
display: table;
height: 100px;
max-width: 277px;
}
.inner {
background-color: red;
display: flex;
height: 50px;
}<div class="container">
<div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div>
<div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div>
</div>