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

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

我的布局也使用flexbox。它也很伟大

问题是，如果我在输出任何HTML之前使用kint，它最终会“高于”HTML/body标记

然后浏览器将其放置在主体标记内，使其受我的flexbox属性的影响

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

我希望调试div的行为就像它们在

我的flexbox知识相当有限（浮动ftw？），所以我在这里：）

html{
身高：100%；
}
身体{
最小高度：100%；
显示器：flex；
柔性流程：行反向；
}
导航{
宽度：150px；
右边框：1px实心#000；
}
主要{
柔性生长：1；
填充：20px；
}

这是我的KINT调试输出
下面是更多的KINT调试输出
编辑用户
主要材料
菜单

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

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

html{
身高：100%；
}
我的身体{
最小高度：100%；
显示器：flex；
柔性流程：行反向；
}
导航{
宽度：150px；
右边框：1px实心#000；
}
主要{
柔性生长：1；
填充：20px；
}

这是我的KINT调试输出
下面是更多的KINT调试输出
编辑用户
主要材料
菜单

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

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

html{
身高：100%；
}
我的身体{
最小高度：100%；
显示器：flex；
柔性流程：行反向；
}
导航{
宽度：150px；
右边框：1px实心#000；
}
主要{
柔性生长：1；
填充：20px；
}

这是我的KINT调试输出
下面是更多的KINT调试输出
编辑用户
主要材料
菜单

这不是CSS问题，而是调试工具的问题。Flexbox在这里帮不上忙。您需要更改工具中的一些设置或使用javascript。这应该不会那么难。。。左下全高导航，其余元素一个接一个。我认为应该从

flex-flow:column-wrap开始和一些
顺序：
不行-flex box只能处理嵌套在flex父级中的同级，因此调试消息永远不会安排在相同的上下文中（就像在
中一样）。您必须以某种方式将它们移动到其中。正如Paulie_D所说，您必须将调试工具设置为插入内容或附加到
main
。至于你的布局，你可以试试这样。这不是CSS的问题，而是调试工具的问题。Flexbox在这里帮不上忙。您需要更改工具中的一些设置或使用javascript。这应该不会那么难。。。左下全高导航，其余元素一个接一个。我认为应该从
flex-flow:column-wrap开始和一些
顺序：
不行-flex box只能处理嵌套在flex父级中的同级，因此调试消息永远不会安排在相同的上下文中（就像在
中一样）。您必须以某种方式将它们移动到其中。正如Paulie_D所说，您必须将调试工具设置为插入内容或附加到
main
。至于你的布局，你可以尝试这样的方式。奇怪的是，完全相同的CSS根据我是在flexboxing body还是它里面的div而表现不同。使用
flex-flow：列换行它在div上运行良好，但将其移动到主体上，突然布局完全不同！浏览器怪癖或标准错误-无论哪种方式，这都是我的最佳选择。谢谢。奇怪的是，完全相同的CSS的行为不同，这取决于我是在Flexbody还是它里面的div。使用
flex-flow：列换行它在div上运行良好，但将其移动到主体上，突然布局完全不同！浏览器怪癖或标准错误-无论哪种方式，这都是我的最佳选择。谢谢