html - Flexbox size child like table cell？

Question

我遇到了 Flexbox 问题。我尝试了很多变体，但没有找到解决方案。

我需要子元素与父容器一起拉伸(stretch)。

第一行的宽度还可以，但背景也应该根据内容拉伸(stretch)。

关于第二行，背景拉伸(stretch)很好，但它的宽度相等，我需要宽度取决于内容，比如auto宽度....

我需要它拉伸(stretch)，就像在变体 3 中使用 display: table 时一样。

.row {
  display: flex;
  justify-content: space-around;
  margin: 20px;
  color: #fff;
}

.row .col {
  min-height: 40px;
  background: #333;
  padding: 10px;
}

.row-v2 {
  flex-wrap: wrap;
}

.row-v2 .col {
  flex: 1;
}

.row-table {
  width: 100%;
  display: table;
}

.col:nth-child(2) {
  background: #666;
}

.row-table .col {
  display: table-cell;
  padding: 10px;
  background: #333;
  color: #fff;
}

<h1>Variant 1</h1>
<div class="row">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">e</div>
</div>

<h1>Variant 2</h1>
<div class="row row-v2">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h1>Variant with table method</h1>
<div class="row-table">
  <div class="col">test</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate, blanditiis culpa neque!</div>
  <div class="col">Lorem ipsum dolor sit amet.</div>
</div>

Answer 1

试试这个。我添加了 col-md-auto 类和它的 css，如下所示:

.col-md-auto {
  -moz-box-flex: 1;
  flex:1 1 auto;
  width: auto;
}

.row {
  display: flex; 
  margin: 20px;
  color: #fff;
}

.row .col {
  min-height: 40px;
  background: #333;
  padding: 10px;
}

.row-v2 {
  flex-wrap: wrap;
}

.row-v2 .col {
  flex: 1;
}

.row-table {
  width: 100%;
  display: table;
}

.col:nth-child(2) {
  background: #666;
}

.row-table .col {
  display: table-cell;
  padding: 10px;
  background: #333;
  color: #fff;
}
.col-md-auto {
  -moz-box-flex: 1;
  flex:1 1 auto;
  width: auto;
}

<h1>Variant 1</h1>
<div class="row row-v1">
  <div class="col col-md-auto">test</div>
  <div class="col col-md-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate</div>
  <div class="col col-md-auto">e</div>
</div>

<h1>Variant 2</h1>
<div class="row row-v2">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h1>Variant with table method</h1>
<div class="row-table">
  <div class="col">test</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate, blanditiis culpa neque!</div>
  <div class="col">Lorem ipsum dolor sit amet.</div>
</div>