flexbox中列的适合内容宽度[重复]答案

【问题标题】：Fit-content width for columns in a flexbox [duplicate]flexbox中列的适合内容宽度[重复]
【发布时间】：2020-11-19 18:46:45
【问题描述】：

我这里有这段代码：

#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）：

我希望看到的：

【问题讨论】：

get rid of that 是什么意思？让它更清楚。
@jinongun 对不起，我指的是列前的空白。
你最好展示你想要的蓝图。
不完全清楚你在说什么可用空间。你能显示问题区域的屏幕截图吗？

标签： html css flexbox

【解决方案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>

【讨论】：