I attempted to implement the suggestions from this answer, and also referenced this CodePen. However, I am still facing an issue where the image that is supposed to flex maintains its original dimensions unless it is alone on a row when the screen is narrow.
There are additional set of div elements in a similar scenario on the actual page. It would greatly enhance the functionality across different screen widths if these side divs could shrink accordingly.
The parent div has flex: auto;, and any images within it have img {width: 90%; height: auto;} specified. The immediate parent of this div also has style="flex: 0 1 250px;" applied to it.
You can find a demo showcasing the issue in this CodePen.
If there is a simple error in my approach, please point it out. Otherwise, I may consider making the image the background of its current container and utilizing background-size: 100% auto; for resizing purposes.
section {
padding: 15px;
display: flex;
flex-wrap: wrap;
margin-top: 3vw;
margin-left: 6vw;
}
.outerDiv {
background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
background-color: rgba(10, 10, 10, 0.6);
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
margin: 15px;
}
.innerDiv p {
padding: 6px 18px 0 15px;
}
.imgResize {
flex: auto;
align-self: center;
padding: 15px;
}
.imgResize img {
width: 90%;
height: auto;
}<section>
<div class="outerDiv">
<div class="innerDiv" style="flex: 0 1 250px;">
<h2>The Rocket Equation</h2>
<p>Mass ratio:</p>
<div class="imgResize">
<a href="rotovator.html">
<img src="http://www.moonwards.com/img/animatedRotovatorLink.png">
</a>
</div>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv">
<h2>Suborbital Hop</h2>
<img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256">
<canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
</div>
</div>
</section>