我在行方向有一個固定的容器(20em)。在這個容器中，我想要3件物品:

包含文本(菜名)的項目 至少占主容器10%剩余空間的項目(菜名和價格之間的鏈接) 包含文本的項目(菜價) 在HTML/CSS中:

<div class="container">
  <div class="dish">Creamy Mushroom Risotto with Parmesan</div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
}

.dish {
  width: fit-content;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
}

它工作得很好，除了第一項有一個換行符。在這種情況下，第二項不會占用所有剩余空間:

https://jsfiddle.net/ptmka1c3/1/

我有什么選擇來得到我想要的？

是的，文本節點不會根據文本對齊屬性將文本對齊到最小值

你可以試著設置文本對齊:兩端對齊或者試試這個答案的第二個選項

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
}

.dish {
  text-align: justify;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
}

<div class="container">
  <div class="dish">Creamy Mushroom Risotto with Parmesan</div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>