在 css 中使用 fit-content 自动调整宽度

Question

我正在尝试使用 min-width 和 fit-content 来防止父部门小于它的子部门。

我首先设置了一个部门 .parent 和 min-width: fit-content 。我，然后添加了一个孩子 width: 100px 和 min-width: fit-content 。最后，我给孩子们添加了足够的字符来破坏 100px ；

 .parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  min-width: fit-content;
  width: 100px;
}

 <div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>

演示： https ://codepen.io/osasseville/pen/NadrgB?editors=1100

我希望父母适合孩子的内容，适合角色的内容。

奇怪的是，如果我将子项的宽度更改为 1%， 则会遵守最小宽度。

原文由 Olivier Sasseville 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

代码正常工作。父 div 只会将其宽度拉伸到其中的内容，即子 div。

而这里你定义了子div的宽度为100px，那么父div的宽度也只会扩展到100px，而溢出到子div之外的文字不被认为是父div的内容。

如果希望父级适合子级的内容，则应将子级 div 的宽度更改为 fit-content

像这样

 .parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  width: fit-content;
}

 <div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>

原文由 Anupam Raut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

好的，所以我不确定我是否完全理解您想做什么，但我们可以从这个答案开始。我不知道您对 CSS 了解多少，所以请不要被我的回答冒犯。

• 首先，在 HTML 中，大多数元素默认情况下有两种呈现方式（这真的很简单）： 块级 或 内联。块级元素将采用 其父元素的宽度。内联元素将占用 其内容的宽度。

• 所以如果你理解这个原则，你会发现让父元素和它的子元素一样宽，也就是和它的内容一样宽是非常简单的。这是一个例子：

 .parent {
   border: 1px solid red;
   /* This will make the parent as wide as its content */
   display: inline-block;
}

.children {
   border: 1px solid green;
   /* This is just so that we see if it's working */
   max-width: 100px;
}

 <div class="parent">
  <div class="children">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

现在，当然还有其他方法可以做到，但这是最简单的解决方案。最佳解决方案将取决于您的上下文。

原文由 Pipo 发布，翻译遵循 CC BY-SA 3.0 许可协议