表格行上的 CSS flexbox 环绕效果答案

【问题标题】：CSS flexbox wrap effect on table row表格行上的 CSS flexbox 环绕效果
【发布时间】：2022-12-17 09:24:35
【问题描述】：

我目前有一个项目列表，其中每个项目由以下部分组成：

水平延伸以填充空间的左侧。这是项目名称所在的位置。
最后有一个右边的框，我在其中保留了一些操作。

我想强制右侧带有动作的框在与左侧的文本发生碰撞时换行。问题是，不同的项目有不同的名称和大小。我怎样才能强制左侧具有与表格相同的大小？

我需要尽可能多地容纳文本，所以最好找到一种方法，从强制换行的那一刻起，其余行也这样做。

这是我想要实现的目标的小草图：

这是我目前正在做的事情的一个例子，虽然包装，但不是同时：

.Box {
  padding: 1rem
}

.Row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
}

.Fill {
  flex: 1 1 auto;
}

<div class="Box">
  <div class="Row">
    <div class="Fill">
      <span>Some text not too big</span>
    </div>
    <div>
      <span>Same width</span>
    </div>
  </div>
  <div class="Row">
    <div class="Fill">
      <span>Some text that will be absolutely big for real</span>
    </div>
    <div>
      <span>Same width</span>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

试试这个：

.con{
  display:flex;
  flex-wrap:wrap;
  
}
.left{
  background-color:red;
  flex:1 1 auto;
}
.right{
  background-color:blue;
  width:300px;
}

<div class="con">
  <div class="left">lskjf aölkfj aölfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöf saöflkas fölkas fösadkfh salökh f</div>
  <div class="right">003</div>  
<div class="left">lskjf aölkfj aölfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöf saöflkas fölkas fösadkfh salökh f</div>
      <div class="right">004</div>
    </div>

您应该将flex-wrap:wrap添加到容器中，并在右侧添加修复width/actions divs。

【讨论】：