html - Images getting smaller when I apply display:flex

Question

I'm trying to reproduce this idea using Flexbox:

The deck div is red and the dealer-cards is green.

.table .dealer-area {
  grid-area: d;
  padding-left: 32px;
  width: 100%;
  
}

.table .dealer-area .shell-deck-and-cards{
  display: flex;
  margin-top: 25px;
  
}

.table .dealer-area .shell-deck-and-cards img{
  max-width:100%;
  max-height:100%;
}

.table .dealer-area .shell-deck-and-cards .deck, .table .dealer-area .shell-deck-and-cards .dealer-cards{
  width: 170px;
}

.table .dealer-area .shell-deck-and-cards .deck{
  margin-right: calc(100px - (0.3 * 100px));
}

.table .dealer-area .shell-deck-and-cards .dealer-cards {
  display: flex;
}

<div class="table">
<div class="dealer-area">
                <div class="dealer-name">
                    <h1>Dealer</h1>
                </div>
                <div class="shell-deck-and-cards">
                    <div class="deck">
                        <img src="assets/cards/back.svg">
                    </div>
                    <div class="dealer-cards">
                        <img src="assets/cards/2.svg">
                        <img src="assets/cards/2.svg">
                        <img src="assets/cards/2.svg">
                    </div>
                    

                </div>      
            </div>
 </div>

question from:https://stackoverflow.com/questions/65649768/images-getting-smaller-when-i-apply-displayflex

Answer 1

use width instead of max-width or min-height instead of max-height

.table .dealer-area {
  grid-area: d;
  padding-left: 32px;
  width: 100%;
  
}

.table .dealer-area .shell-deck-and-cards{
  display: flex;
  margin-top: 25px;
  
}

.table .dealer-area .shell-deck-and-cards img{
  width:100%;
  max-height:100%;
}

.table .dealer-area .shell-deck-and-cards .deck, .table .dealer-area .shell-deck-and-cards .dealer-cards{
  width: 170px;
}

.table .dealer-area .shell-deck-and-cards .deck{
  margin-right: calc(100px - (0.3 * 100px));
}

.table .dealer-area .shell-deck-and-cards .dealer-cards {
  display: flex;
}

<div class="table">
<div class="dealer-area">
                <div class="dealer-name">
                    <h1>Dealer</h1>
                </div>
                <div class="shell-deck-and-cards">
                    <div class="deck">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                    </div>
                    <div class="dealer-cards">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                    </div>
                    

                </div>      
            </div>
 </div>