html - 应用 display:flex 时图像变小

Question

我正在尝试使用 Flexbox 重现这个想法：

套牌 div 是红色的，庄家牌是绿色的。

.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>

当我不应用显示 flex 时的卡片尺寸是正确的，可以在这里看到 但是一旦我应用了 flex 显示，这就是结果。

我试过使用网格，但感觉不行。关于如何解决它的任何想法？

标签： htmlcss

Answer 1

使用width代替max-width或min-height代替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>