HTML/CSS 边框随着溢出而增长答案

【问题标题】：HTML/CSS border grow with overflowHTML/CSS 边框随着溢出而增长
【发布时间】：2021-03-26 21:13:48
【问题描述】：

我似乎无法理解边框的实际大小。请假设以下 HTML/CSS

<!DOCTYPE html>
<html>
    <body style="height: 100vh; margin: 0; padding: 0; display:flex">
        <div style="flex-grow: 1; flex-basis: 0; border: solid 1px black; min-height: 0; min-width: 0;">
            <div style="width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column;">
                <div style="border: solid 1px red;">abcdefghijklmnopqrstuvwxyz1234567890</div>
            </div>
        </div>
        <div style="flex-grow: 10; border: solid 1px black;"></div>
    </body>
</html>

红色边框总是和带有 "flex-grow: 1" 的 div 一样宽，而不是像文本 "abcd..." 那样宽。而且我不明白为什么，也不明白如何解决它。据我了解，红色边框应完全包围文本，因为溢出提供了足够的空间。谁能解释为什么它没有？为什么总是用 div 的宽度加上 "flex-grow: 1"？

亲切的问候

PS：每个浏览器都一样

【问题讨论】：

你期待什么？ flex-grow: 1; 将调整元素大小以填充剩余空间。它与边界无关。 broder 总是在existign 元素上声明其大小。它不会调整元素的大小。在您的情况下，元素的大小由flex-grow（填充剩余空间）而不是通常的内容决定。边框将围绕元素本身而不是子内容。
我会用红色边框包围文本，因为它会按预期增长到溢出区域。那里的文字也没有被截断吗？我会实现文本完全被边框包围吗？
一个边框围绕着它使用的元素。文本不是元素。它是 div 元素的内容。那么，兄弟为什么要翻译文本呢？谎言我说它不是一个元素，并且在元素内显示边框是没有逻辑意义的。
好的，我了解元素与其内容之间存在差异。但是你明白我想要达到的目标吗？你能告诉我怎么做吗？我还是没有头绪
是的，就像我说的，从语义上讲，兄弟总是围绕一个元素而不是它的内容。因此，您必须将文本包装在自己的元素（如跨度或段落）中，并将边框应用于该元素。或者不要使用flex-grow，这样 div 将具有其内容的大小，并且不会被 flex-grow 调整大小。

标签： html css flexbox border

【解决方案1】：

从语义上讲，broder 总是会覆盖它所应用的元素。这就是broder的evry定义。您的文本不是元素，而是元素的内容。要将边框应用于文本，您需要将文本包装在自己的元素中，例如<span>。然后将边框应用到跨度。

<div style="border: solid 1px black;">
  <div style="width: 100%; overflow: auto; display: flex; flex-direction: column;">
    <div><span style="border: solid 1px red;">abcdefghijklmnopqrstuvwxyz1234567890</span></div>
  </div>
</div>

【讨论】：

【解决方案2】：

使用flex-grow: 1; flex-basis: 0;，您实际上是在说：“所以项目的初始主要大小应该为 0，但我想将与主要项目相关的增长因子设置为 1”。结尾看起来像你展示的例子。

由于我现在不是你想要完成的，你只是说你想用红色边框包围文本，我想你想看到整个文本，只需删除应该做的flex-grow: 1; flex-basis: 0;把戏。

【讨论】：

这不是这里的问题。 OP 确实想知道为什么边框围绕元素（div）而不是其内容。首先，它与 flex-grow 无关。只是 OP 不理解的语义。
不，当文本太长时，我想要一个滚动条。但我希望红色边框始终围绕文本，无论它是否溢出父元素