フレックスボックス表示の相対単位でmax-widthを使用したクエリ

Question

ディスプレイフレックスを使用してラッパーコンテナに合わせて、チームメンバーの写真と伝記を4行並べて表示しようとしています。これは、各imgの最大幅を360pxにすると機能しますが、max-widthを％相対単位で使用すると機能しません。誰でも知っている理由は？私はすべてのプロジェクトで相対的なユニットを使用したいと思います。

<div id="people"> 

        <div class="john person"> 
         <img src="images/john%20doe.jpg" alt="CEO"> 
         <h3>John Doe</h3> 
         <h4>CEO & Founder</h4> 
         <button>Contact</button> 
        </div> 

        <div class="jane person"> 
         <img src="images/jane%20doe.jpg" alt="architect"> 
         <h3>Jane Doe</h3> 
         <h4>Architect</h4> 
         <button>Contact</button> 
        </div> 

        <div class="mike person"> 
         <img src="images/mike%20ross.jpg" alt="architect"> 
         <h3>Mike Ross</h3> 
         <h4>Architect</h4> 
         <button>Contact</button> 
        </div> 

        <div class="dan person"> 
         <img src="images/dan%20star.jpg" alt="architect"> 
         <h3>Dan Star</h3> 
         <h4>Architect</h4> 
         <button>Contact</button> 
        </div>    

       </div> 


    #people{ 
     display:flex; 
     flex-wrap: wrap; 
     justify-content: space-between; 
     flex-basis:100%; 
    } 

    #people div img { 
     max-width: 360px; 
    } 

上記のコードは結果を達成します。しかし、#people div img {}の最大幅を相対％単位に変更したい場合は、どのようにすればよいのか誰にでも分かります。私はオンラインテンプレートを使用していて、それを自分で再構築しようとしています（実際のプロジェクトではこのようなものを作成しなければならないと私はこの問題を理解できません）。ありがとう！

Answer 1

私はこれを参考にしていたと思います。 flex:1;のプロパティを#people子クラスに追加する必要があります。つまり、.personとなり、フレキシブルになります（flex-grow：1、flex-shrink：1、flex-basis：auto）。そして、画像の幅を100%に設定します。これは、ビューポートの幅に対してリサイズされます。

#people { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.person{ 
 
flex:1; 
 
} 
 

 
.person img { 
 
max-width:100%; 
 
}

<div id="people"> 
 

 
    <div class="john person"> 
 
    <img src="http://via.placeholder.com/300x300" alt="CEO"> 
 
    <h3>John Doe</h3> 
 
    <h4>CEO & Founder</h4> 
 
    <button>Contact</button> 
 
    </div> 
 

 
    <div class="jane person"> 
 
    <img src="http://via.placeholder.com/300x300" alt="architect"> 
 
    <h3>Jane Doe</h3> 
 
    <h4>Architect</h4> 
 
    <button>Contact</button> 
 
    </div> 
 

 
    <div class="mike person"> 
 
    <img src="http://via.placeholder.com/300x300" alt="architect"> 
 
    <h3>Mike Ross</h3> 
 
    <h4>Architect</h4> 
 
    <button>Contact</button> 
 
    </div> 
 

 
    <div class="dan person"> 
 
    <img src="http://via.placeholder.com/300x300" alt="architect"> 
 
    <h3>Dan Star</h3> 
 
    <h4>Architect</h4> 
 
    <button>Contact</button> 
 
    </div> 
 

 
</div>