Question

我似乎在理解边框的实际大小时遇到了问题。请假设以下 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..." 一样宽。我不明白为什么，也不明白如何解决它。据我了解，红色边框应该完全包围文本，因为溢出提供了足够的空间。谁能解释为什么它不？为什么它总是使用带有“flex-grow:1”的div的宽度？

亲切的问候

PS：每个浏览器都一样

Answer 1

从语义上讲，broder 将始终环绕其应用的元素。那是一个broder的every定义。您的文本不是元素，而是元素的内容。要将边框应用于文本，您需要将文本包裹在自己的元素中，例如 <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>

Answer 2

使用 flex-grow: 1; flex-basis: 0; 时，您本质上是说：“所以项目的初始主尺寸应该是 0，但我想将与主项目相关的增长因子设置为 1”。最后看起来像你展示的例子。

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

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

2 个答案: