弹性列的自动宽度

Question

如何设置第一个 flex 列的宽度，使其宽度只是其内容的大小？ http://codepen.io/anon/pen/rrKkOW

 <div class="flex">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

.flex {
  display: flex;
}

.inside {
  flex: 1;
  border: 1px solid #000;
}

设置 width: auto 不起作用……像 flex-basis: content 这样的东西会很高兴:)

原文由 Ivan Topić 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不要提供该列 flex:1 因为它会扩展以占用尽可能多的空间。

事实上，根本不要给它任何 flex 值，它将默认为 width:auto 。

 .flex {
  display: flex;
}
.inside {
  border: 1px solid #000;
}
.inside-right {
  flex: 1;
  background:#c0ffee;
}

 <div class="flex">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

<div class="flex">
  <div class="inside inside-left">Left Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>

<div class="flex">
  <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>

编辑：似乎意图是让每个“左”元素的大小相同。

这对于 flexbox 是不可能的，但 CSS Tables 可以实现这一点。

 .row {
  display: table-row;
}
.inside {
  display: table-cell;
  border: 1px solid grey;
}
.inside-left {
  background: lightgreen;
}

 <div class="row">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

<div class="row">
  <div class="inside inside-left">Left Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>

<div class="row">
  <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议