使框宽度（动态）适合其内容[重复]答案

【问题标题】：Make the box width(DYNAMIC) fit to its content [duplicate]使框宽度（动态）适合其内容[重复]
【发布时间】：2020-08-28 07:52:48
【问题描述】：

请查看此代码和图片。如果我调整窗口大小，红色框会拉伸，但我希望红色框的宽度始终适合其内容。（我不希望右侧有空白）如何纠正这个问题？

Kindly See Image

请注意：容器的宽度，项目的width都是动态，我不能硬编码像100px这样的值;

（内联块不起作用）

   .main {
      border: 10px solid red;
      padding:10px;
      display: flex;
      flex-wrap: wrap;
      background-color:yellow!important;
    }
    
     .main div {
      width: 150px;
      height: 150px;
       border: 1px solid black;
    }

  
    
    <div class="main" >
      <div style="background-color:coral;">A</div>
      <div style="background-color:lightblue;">B</div>
      <div style="background-color:khaki;">C</div>
      <div style="background-color:pink;">D</div>
      <div style="background-color:lightgrey;">E</div>
      <div style="background-color:lightgreen;">F</div>
    </div>

【问题讨论】：

容器中应该装多少物品？
我很确定这将是重复的：css-tricks.com/snippets/css/a-guide-to-flexbox
不要重复同样的问题。 edit你原来的问题来解释为什么它不是重复的，如果这是你的想法......但它是。
Pauline，我经历过，还有很多类似的其他形式，我相信我的问题是独一无二的。我得到了非常接近的解决方案，但并不准确。请不要跳入标记为重复。像我这样的人非常依赖这个和其他论坛来学习。希望你能理解。
@phyle 您能否展示一下您从副本中所做的什么，以及您所说的不准确是什么意思？因为这是尽可能模糊的。如果你说“从重复的 X 中，我取了 Y，但发生的是 Z 而不是 X”......这使得问题更容易解决。

标签： javascript html css sass

【解决方案1】：

如果您想始终避免出现空格，请对元素使用 display:inline-flex; 和 flex-grow: 1;。

   <style>    
.main {
  border: 10px solid red;
  padding:10px;
  display: inline-flex;
  flex-wrap: wrap;
  background-color:yellow!important;
}

 .main div {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  flex-grow: 1;
   
}
</style>

<body>


<div class="main" >
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>

【讨论】：

您的解决方案是我正在寻找的最接近的解决方案。除了最后两列延伸到全宽的事实。只需要内容宽度。 ——想象一下，如果灰色框有一个内容“你好吗？”和绿色框有“我很好，非常感谢！”，现在，那些框的最大宽度必须是内容的长度。
我仍在努力寻找解决方案。需要避开容器的空白区域（右侧）。内容不应拉伸。有什么帮助吗？

【解决方案2】：

像这样？

.main {
  border: 10px solid red;
  padding:10px;
  display: flex;
  
  flex-flow: wrap;
  background-color:yellow!important;
}

 .main div {
  width: 150px;
  height: 150px;
  flex-grow: 1;
  border: 1px solid black;
}

.main div.nogrow{
  flex-grow: 0;
  }

<div class="main" >
  <div style="background-color:coral;">A</div>
  <div class="nogrow" style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div class="nogrow" style="background-color:lightgrey;">E</div>
  <div class="nogrow" style="background-color:lightgreen;">F</div>
</div>

【讨论】：

几乎！非常感谢您的帮助。但是，请注意，当您调整窗口大小时，我不希望最后 2 个框拉满。宽度。想象一下，如果灰色框有一个连接网络“你好吗？”绿色框有“我很好，非常感谢！”，现在，那些框的最大宽度必须是内容的长度。
你能帮忙吗？
好吧，它被否决了两次，它已经关闭了..但我为你更新了示例..希望它有所帮助
谢谢！！但是，如果我们将 nogrow 类添加到所有子 div，那么它就不起作用了。
尝试添加“nogrow”并向 div 添加一些文本（不是像 A 这样的单个字符），我测试过，我可以看到调整大小时容器宽度正在拉伸。希望我有办法向你展示我的意思。 :(