包装前在盒子内最多占用 space？

Question

所以当我点击一些设计好的按钮时，我需要在我的页面上方显示一个框（绝对位置），在这个框内将是一个应该显示在一行中的“标签”列表。但我的问题是我无法使标签正确包装，占用了盒子的最大值 space 。我想在一行中显示尽可能多的标签。

知道这是否可行吗？

.vectors {
  display: inline-flex;
  min-width: 20vw;
  max-width: 50vw;
  background-color: #333;
  padding: 15px;
  margin-bottom: 15px;
}
  
.vector {
  display: flex;
  padding: .35rem;
  background-color: #c0c0c0;
  margin-right: .5rem;
}

<h5>
  with few boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

<h5>
  with many boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

Answer 1

使用flex-wrap 属性将内容换行到下一行

.vectors {
  ...
  flex-wrap: wrap;
  ...
}

.vectors {
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 20vw;
  max-width: 50vw;
  background-color: #333;
  padding: 15px;
  margin-bottom: 15px;
}
  
.vector {
  display: flex;
  padding: .35rem;
  background-color: #c0c0c0;
  margin-right: .5rem;
}

<h5>
  with few boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

<h5>
  with many boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

Answer 2

你需要一个 flex-wrap: wrap 代表 .vectors 和一个 flex-grow: 1 代表 .vector 所以 children 占据行中剩下的空 space包裹后。请注意，最后一行可能看起来很难看，解决方案是使用伪元素。摘要：

.vectors {
  flex-wrap: wrap;
}
.vectors::after {
  content: '';
  flex: 100 0 0;
}
.vector{
  flex-grow: 1;
}

这是codepen

包装前在盒子内最多占用 space？

Taking up maximum space inside a box before wrapping?

html

css

flexbox