I'm struggling to understand why my images do not resize when I shrink or resize my Chrome window. Can someone help me out with an explanation? I've been trying for some time now but still can't seem to crack it, and I haven't found the answer anywhere else. The image shrinks in Firefox when running on my localhost, but it's not behaving on jsfiddle either. And unfortunately, it's still not working in Chrome (57.0.2987.110).
<div class="page">
<div class="container">
<div class="title">
<H1>FLEXBOX PRACTICE</H1>
</div>
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="images">
<img src="http://www.placebacon.net/1280/720" alt="Bacn">
</div>
</div>
</div>
body {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
h1 {
font-size: 72px;
margin: 20px 0;
}
.page {
width: 100vw;
height: 100vh;
background-color: pink;
}
.container {
margin: 0 auto;
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
}
.content {
display: flex;
justify-content: space-between;
height: 80vh;
width: 60vw;
align-items: center;
background-color: salmon;
}
.text {
flex-grow: 0;
padding: 10px 20px 10px 20px;
background-color: red;
color: white;
border-radius: 10px;
width: 340px;
font-size: 24px;
font-family: verdana;
}
.images {
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
max-width: 600px;
width: 600px;
background-color: yellow;
}
.images img {
display: flex;
flex-grow: 1;
flex-shrink: 1;
max-width: inherit;
width: inherit;
}