在自动插入正文的 html 标签之外的元素上使用 flexbox

Question

我正在编写一个小的 webapp，我正在使用 kint 进行调试。效果很好。

我也在为我的布局使用 flexbox。效果也很好。

问题是，如果我在输出任何 HTML 之前使用 kint，它最终会变成 "Above" html/body 标签。

然后浏览器将其放置在内部 body 标记中，这使其受到我的 flexbox 属性的影响。

结果它没有出现在页面顶部，而是出现在右侧并压扁了我的主页面。

我希望调试 div 的行为就好像它们在内部 <main>

我的 flexbox 知识相当有限（Floats ftw？）所以我来了 :)

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-flow: row-reverse;
}

nav {
    width: 150px;
    border-right: 1px solid #000;
}

main {
    flex-grow: 1;
    padding: 20px;
}

<div>Here is my KINT debug output</div>
<div>Here is more KINT debug output</div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit user</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
        <main>Main stuff</main>
        <nav>Menu</nav>
    </body>
</html>

Answer 1

最好的解决方案可能是不要在 body 本身上设置 flex

添加一个 div 用作所有页面的容器，并在其中设置 flex

html {
    height: 100%;
}

.mybody {
    min-height: 100%;
    display: flex;
    flex-flow: row-reverse;
}

nav {
    width: 150px;
    border-right: 1px solid #000;
}

main {
    flex-grow: 1;
    padding: 20px;
}

<div>Here is my KINT debug output</div>
<div>Here is more KINT debug output</div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit user</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
      <div class="mybody">
        <main>Main stuff</main>
        <nav>Menu</nav>
        </div>
    </body>
</html>

在自动插入正文的 html 标签之外的元素上使用 flexbox

Using flexbox on elements outside the html tag that are automatically inserted into the body

css

flexbox