CSS：宽度：适合内容和弹性包装：包装；答案

【问题标题】：css: width:fit-content & flex-wrap:wrap;CSS：宽度：适合内容和弹性包装：包装；
【发布时间】：2020-09-06 14:31:40
【问题描述】：

我正在尝试找出一种在容器上使用 fit-content 和 flex-wrap:wrap 的方法...这是我得到的：

.wrap {
  border: 1.5px dashed #777;
  padding:.5rem;
  width:76%;
}

.box {
  padding:1rem;
  outline: 1px solid;
  display:inline-block;
}

<div class="wrap">
    <div class="box">testing, ok, fine</div>
    <div class="box">testing, ok, fine, ok, fine</div>
    <div class="box">testing, okokokok, fine</div>
    <div class="box">testingtestingtesting, ok, fine</div>
    <div class="box">testingtesting, ok, fine</div>
    <div class="box">testing, ok, finefinefinefine</div>
    <div class="box">testinfineg, ok, fine</div>
    <div class="box">testinffinefineineg, ok, fifinene</div>
  </div>

&这是我想要的：

那么我该如何实现呢？

【问题讨论】：

尝试将宽度更改为 67%
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： html css sass flexbox

【解决方案1】：

不知道你的代码无法给出准确的解决方案，但逻辑会有点像这样来实现你想要的

HTML

<div class="wrapper">
   <div class=item> Item </div>
   <div class=item> Item </div>
   <div class=item> Item </div>
   .......
</div>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 75%;
}

.item {
  padding: 1rem;
  border: 1px solid black;
}

【讨论】：