缩小固定大小的框之间的垂直间距以适合父级边界内的列表

Question

制作纸牌游戏网络应用程序，我试图在CSS中尽可能多地使用渲染逻辑（可能只是对我自己的挑战）。其中一个更难的挑战是如下：在纸牌中，我需要显示垂直堆叠的卡片（具有固定的尺寸和纵横比），如下图所示。堆栈1和2显示了原理。但是，如果堆栈变得非常大，则可能需要缩小卡之间的垂直间距，以使整个堆栈适合父级的边界（图像中的堆栈3）。为了实现这种缩小，仅在堆栈溢出父级边界的情况下，就是这个问题的内容。

'中间'结果是我能够使堆栈在图像中表现得像3和4，方法是将每张卡放在一个0高度的容器中，在堆叠内垂直均匀地间隔开，然后线性地将卡片的margin-top从-0％插入到-100％。 margin-top的这个设置必须在CSS之外用JS完成，这是一个让步 - 但它不是最糟糕的解决方案，因为它不需要JS响应渲染本身。这个中间结果显然只适用于溢出情况（堆栈3），而不适用于普通情况（图像中的堆栈1和2），在这种情况下它很难看（堆栈4）。

问题是，是否有可能仅在通过某个关键的中断点之后才能实现这种自动收缩，仅使用CSS，和/或可能是某些'之前的渲染'用JS设置的属性/样式。

问题草图（其工作版本可在http://jsfiddle.net/kelleyvanevert/5fkac3s7/1/找到）：

堆栈3和4的Flex-box'中间结果'：

CSS

.stack {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.surr {
  height: 0;
}

HTML

<div class="stack">
  <div class="surr"><div class="item" style="margin-top: -0%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -25%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -50%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -75%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -100%;"></div></div>
</div>

Answer 1

（请参阅下面的评论，了解其他一些结果）

你可以使用伪元素（:after）来帮助你在拥有更多牌时保持你想要的筹码。然后你可以简单地控制这个元素的flex值来控制卡应该收缩多少，因为它将控制这个元素应该占用多少空间：

＆＃13;

＆＃13;

.box {
  margin-top: 25px;
  border: 2px solid #000;
  height: 300px;
  display: flex;
  flex-direction: row;
}

.stack {
  position: relative;
  box-sizing: border-box;
  width: 15%;
  height: 100%;
  padding: 5px 5px 0 5px;
  margin: 0 10px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
    display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.label {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  text-align: center;
}

.item {
  box-sizing: border-box;
  height: 0;
  padding-top: 80%;
  /* aspect ratio */
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid #333;
}

.stack:after {
  content: "";
  flex: 5;
}

.surr {
  height: 0;
  flex: 1
}

＆＃13;

<div class="box">
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">D</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>    
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>    
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;