时间戳

首页 > 解决方案 > HTML/CSS 边框随着溢出而增长

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

问题描述

我似乎无法理解边界的实际大小。请假设以下 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：每个浏览器都一样

标签： htmlcssflexboxborder

解决方案

从语义上讲，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>

推荐阅读