CSS: 带有 inline-flex 的 "width: auto" 容器的行为规则是什么？

Question

我试图使用 flexbox 创建一个具有动态宽度的列表/table 视图，遇到了一个我无法真正理解的行为。我试图达到的结果是在最宽点处适合列表内容的宽度。

.main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}

<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

归根结底，宽度似乎是由总字符数决定的，而不是我所期望的最宽点。例如，您可以编辑 HTML 并删除 N/A，宽度将减小。

当我使用 white-space: nowrap 切换到 display: inline-block 时，宽度符合预期，但“列”未对齐。

.main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-block;
  white-space: nowrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}

<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

显示inline-flex时出现宽度偏大的原因是什么？有没有办法获得我想要实现的行为？我知道它可能可以用 display: grid 解决，但我正在寻找更简单的解决方案。

Answer 1

I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.

如果你对网格布局的处理不够精细，可能会很困难，但如果你使用网格系统，它看起来并不那么复杂;)

关于宽度，看max-content。

简单示例：

.main {
  width: max-content;
  background: rgb(233, 148, 148);
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.label,
.value {
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}

<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

过去，在 flex 和 grid 之前，display 会使用 table-layout。

.main {
      display:table;
      background: rgb(233, 148, 148);
    }
  .container {
    display: table-row;
  }
  .label, .value {
    padding: 4px;
    display:table-cell;
  }
  .label {
    text-align: end;
    border-right: 2px solid red;
  }
  .value {
    text-align: start;
  }

<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

CSS: 带有 inline-flex 的 "width: auto" 容器的行为规则是什么？

CSS: What are the behavior rules for a "width: auto" container with inline-flex?

html

css

flexbox

width

display