JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mediaContainer mediaCenterContainer">
	<div class="imageContainer">
        <img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
	</div>
</div>

CSS

.mediaContainer
{
	overflow: visible;
    width:100%;
}

.mediaCenterContainer
{
	display: flex;
}

.imageContainer
{
	flex-shrink:1;
    min-width:1px;
}
.imageContainer img {
    max-width:100%;
}