如何让底部成为元素的开头？

Question

我有一个容器，其中包含要使用不同排序算法进行排序的元素。

在其中一个容器中，我选择使这种排序可见的方式最终导致两个元素临时放置在同一个 div 中。

结果，两个元素的大小相加，使它们大于容器，导致容器的高度增长，如图所示。

html 是：

.sort-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  gap: 2px;
  align-items: flex-end;
  justify-content: space-between;
  width: 20%;
  /* height: 200px; */
  aspect-ratio: 1 / 1;
  /* overflow: hidden; */
  padding: 5px;
  border: 1px solid black;
}


/* .sort-container div {
  position: relative;
  bottom: 0;
} */

.sort-element {
  display: block;
  width: 100%;
  background-color: #707070;
}

<div data-sort="insertionSort" class="sort-container">
  <div>
    <div class="sort-element" style="height: ${altura}px">
    </div>
    <div class="sort-element" style="height: ${altura}px">
    </div>
    // All the other .stor-element
  </div>
</div>

我的第一个想法是使用

overflow: hidden

，结果是元素不断被向下推，但这一次，溢出隐藏了负y轴上的内容，如图所示。

我相信发生这种情况是因为，即使项目与弹性盒的末端对齐，它的开始仍然在顶部。

这就是为什么我想知道如何将弹性盒开始设置为容器的结束。

Answer 1

我不完全明白你想做什么。我假设您想要：

1. 限制容器的高度
2. 隐藏溢出
3. 使可见内容从底部/末端对齐

如果是这种情况，请将

align-content: end

添加到

.sort-container

（并除去包装纸

div

）

.sort-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  gap: 2px;
  align-items: end;
  align-content: end;
  justify-content: space-between;
  width: 100px;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 5px;
  border: 1px solid black;
}

.sort-element {
  background-color: #707070;
}


ol {
  margin: 0;
}

<div class="sort-container" data-sort="insertionSort">
  <div class="sort-element">
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <div class="sort-element">
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
</div>