css Flex 流体宽度

Question

我有一个有点复杂的问题。我必须在 2 列中展示食谱的成分。一栏是配料数量和计量单位，右边是配料。đ

结构明智的一种成分得到 2 个 DIV-s，左右部分

.recipeIngredient {
  display: flex
}

.unit {
  flex: 1: border-right:1 px solid #666;
  padding-right: 3%;
  text-align: right;
}

.ingredient {
  flex: 2;
  padding-left: 3%;
  text-align: left
}

<p class='recipeIngredient'>
  <div class='unit'>1 kg</div>
  <div class='ingredient'>flour (it should be wholegrain type</div>
</p>
<p class='recipeIngredient'>
  <div class='unit'>2 pieces of big</div>
  <div class='ingredient'>tomatoe</div>
</p>

可以有很多行。

我用浮点数和宽度做了这个，但效果不好，所以我尝试使用 flex。在我的示例中，左列是 33% 宽度，而右列是两倍大小。这通常没问题。但有时我会在左栏中得到更长的线，有时在右栏中。

如果我在第一列中的所有行都很短，而右边的行更长，必须分成两行，我如何才能使宽度变得流畅，宽度比例会改变，只给出所需的空间左列还是右列？

这里的另一个问题是，如果两列的内容都太长，我想优先考虑左列，右列应该中断，而不是左列，因为如果列是这样的，它看起来很愚蠢：

最多 1 个 |全麦花
公斤

如果可能的话，我宁愿全麦花会破裂，而左侧会保持在一起。如果左侧有空间，则缩小列并为右侧留出更多空间。

我不确定这是否可能，因为我有基于行而不是基于列的单元格，并且所有单元格都应该根据整体进行调整，而不是单独调整，我希望所有成分对齐（左侧对齐右侧左对齐）。

我的代码还有另一个问题。如果我喜欢将成分垂直对齐到底部而不是顶部，这样它就会读取

最多 1 个 |
公斤        |全麦花

看起来更好。但是使用 flex 将其放在底部会使右侧单元格缩小到内容，因此顶部缺少分隔线。

PS - 也许不使用 CSS 网格会更好？但我想我的结构不是最适合它的，但它是谷歌智能卡所需要的。

Answer 1

使用表：

section {
  display: table;
  table-layout: fixed;
  border: 1px solid;
  max-width: 200px;
}

.recipeIngredient {
  display: table-row;
}

.unit,
.ingredient {
  display: table-cell;
  outline: 1px solid;
  padding: 5px;
}

.unit {
  white-space: nowrap;
}

<section>
  <div class='recipeIngredient'>
    <div class='unit'>1 kg</div>
    <div class='ingredient'>flour (it should be wholegrain type</div>
  </div>
  <div class='recipeIngredient'>
    <div class='unit'>2 pieces of big</div>
    <div class='ingredient'>tomatoe</div>
  </div>
</section>