how is the code in amp-html to have a multi column image responsive?

This is what I meant, from this link with the code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.row {
    display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
    flex: 33.33%;
    padding: 5px;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

With that code, there is one row with three images side by side and if the screen is resized those 3 images gets bigger/smaller accordingly proportionally.

I've found from the internet about amp-html something like this :

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP #0</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

  <style amp-custom>
  .container {
    display: flex;
    flex-direction: row;
    width: 450px;
    height: 200px;
    margin:auto;
  }

  </style>

  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>

<div class="container">
   <amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=flex-item></amp-img>
  <amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" layout=flex-item></amp-img>
  <amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" layout=flex-item></amp-img>
</div>

</body>
</html>

But the one in the amp-html code doesn't make those three images grow/shrink when I resize the screen.

So I tried to change the style like this :

  <style amp-custom>
  .container {
    display: flex;
    flex-direction: row;
    max-width: 450px;
    height: 200px;
    margin:auto;
  }

  </style>

The width of those three images did grow/shrink when I resize the screen, but not the height. So I tried to change the height: 200px; into max-height: 200px; then all the three images gone (no display). The same result if I deleted the height attribute in that style, no display.

My question :
How do I write the code in order that the width and the height goes proportionally when I resize the screen ?

Solution

Change your style as follows:

 .container {
    display: flex;
 }

 .child-flex-default{
    width: 100%; // Or 33.33%, or whatever. Just make sure you specify in %
 }

Now, you have to change your amp-img tags as follows with layout="responsive" :

<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n"></amp-img>

Just note that when you use repsonsive layout you have to specify width and height attributes. And now your images will resize responsively maintaining the width, height ratio that you specified.