javascript - CSS - 将所有子元素的总宽度设置为其父元素

Question

我正在尝试创建一个包含矩形的正方形，每个矩形都包含一个单词。每个子矩形的总宽度应该等于父矩形，但问题是我不知道每个单词的顺序或长度，使用搜索过滤器我可以动态更新列表客户端，因此我可以不要为每个包含的矩形静态分配宽度/填充/边距。为了说明我的问题，这是我当前的代码，以及显示我当前拥有的内容的屏幕截图。

<div class="index">
  <!-- heading, filter input and other stuff here -->
  <div class="books">
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <!-- rest of the book divs here -->
  </div>
</div>

我尝试在图像编辑器中四处移动矩形这个词来展示我想要实现的目标，但结果变得一团糟。基本上，我想在它们的父方 block 内“对齐”矩形，以便矩形与父方的所有边齐平。我更喜欢在边距上使用 width/padding，因为我想在所有边距周围保持 1px 边距。 IE。单词的灰色背景宽度应该增加。如果您需要查看我正在努力实现的目标的图片，请告诉我，我会尝试再次移动它们。

另请注意，我使用的是 Vue.js 和 Vuetify(矩形一词由 v-for 生成)，因此如果您的回答包括 Vue/Vuetify 特定解决方案，我会不仅仅是快乐。但为了 future 的读者，我也很乐意接受普通的 HTML/CSS/JS 解决方案。

请同时给我们这个效果的名称(如果有的话)。

Answer 1

我在 https://jsfiddle.net/saksham_malhotra/52nz7rpf/ 使用 flexbox 创建了一个 fiddle

这有助于您将书名展开以覆盖每一行，直到最后。

伪 after 元素用于在最后留下空白，而不是让最后几个框覆盖整行。