使框宽度（动态）适合其内容[重复]
Posted
技术标签:
【中文标题】使框宽度（动态）适合其内容[重复]【英文标题】：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”......这使得问题更容易解决。 【参考方案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 这样的单个字符），我测试过，我可以看到调整大小时容器宽度正在拉伸。希望我有办法向你展示我的意思。 :(以上是关于使框宽度（动态）适合其内容[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何制作2个内联div，一个是其内容的宽度，第二个是父级剩余空间的宽度[重复]