html - 弹性框中列的适合内容宽度

Question

我在这里有这段代码：

#wrapper {
  height: 250px;
  position: relative;
}

#container {
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: wrap;
  background-color: gray;
  height: 100%;
}

.item {
  background: skyblue;
  margin: 0 0 1em 1em;
  padding: 1%;
  height: fit-content;
}

<div id="wrapper">
  <div id="container">
    <div class="item">Really really really really really really long</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
  </div>
</div>

如您所见，第二列和第三列前面有一些空白区域。

有没有办法摆脱它？

---

编辑：这是产生的结果（Chrome 84）：

我希望看到的：

Answer 1

添加align-content: flex-end;做#container你想做的事吗？

#wrapper {
  height: 250px;
  position: relative;
}

#container {
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: wrap;
  background-color: gray;
  height: 100%;
}

.item {
  background: skyblue;
  margin: 0 0 1em 1em;
  padding: 1%;
  height: fit-content;
}

<div id="wrapper">
  <div id="container">
    <div class="item">Really really really really really really long</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
  </div>
</div>