图像未在flexbox布局中调整大小

我试着按照这个答案中的建议,如本CodePen所示,但需要弯曲的图像仍然保持其原始尺寸,除非屏幕很窄,它就在行上.

在类似的情况下,真实页面中还有另一组div - 如果侧面div会缩小,它将有助于页面在更大的宽度范围内工作.

它包含的div包含flex: auto;在它上面,img {width: 90%; height: auto;}对于其中的任何图像,该div的父级都有它.

这是它的CodePen.

我想有一个简单的错误,如果不是,我想我会将图像作为当前div的背景,然后设置background-size: 100% auto;它.

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;
}

  

    

      
The Rocket Equation
      
Mass ratio:
      

        
          
        
      
    
  

  

    

      
Suborbital Hop
      
      
    
  

img { width: 100%; height: auto; }