Html 使用flex在父元素外部展开的子元素

我使用CSS flex并排显示包装中包含的两个div，我一直在尝试，以便在

#myClippetWrapper

中设置高度，因此在

#myClippetWrapper

的子元素中，我可以设置

高度：100%

但是，从运行下面的代码片段可以看出，
#myClippetWrapper
中的所有元素都在主部分之外，它们都挂在主内容div之外

我不想使用
overflow:auto
，因为我不想在那里使用滚动条，我只需要
#myClippetWrapper
的子元素不在main section/div之外


main{
保证金：0自动；
边缘顶部：10px；
边缘底部：10px；
填充：8px；
背景色：红色；
宽度：100%；
最大宽度：50%；
高度：自动；
}
#MyClipperRapper{
显示器：flex；
高度：700px；
}
#克利普特纳夫{
填充：10px；
宽度：250px；
身高：100%；
背景色：#22222；
右边距：10px；
}
#代码和注释振打器{
显示器：flex；
宽度：100%；
}
#代码和注释振打器>分区{
弹性基准：100%；
身高：100%；
}
#代码视图{
填充：10px；
/*弹性：0.40%*/
身高：100%；
背景色：#22222；
右边距：10px；
}
#记事本{
填充：10px；
/*弹性：1*/
身高：100%；
背景色：#22222；
}
#代码注释编辑器{
身高：100%；
背景色：#EAEAEA；
}

添加

到您的子元素。这将使填充显示在框的内部而不是外部，并且不会增加整体大小
 添加属性


*{
框大小：边框框；
}
主要{
保证金：0自动；
边缘顶部：10px；
边缘底部：10px；
填充：8px；
背景色：红色；
宽度：100%；
最大宽度：50%；
高度：自动；
}
#MyClipperRapper{
显示器：flex；
高度：700px；
}
#克利普特纳夫{
填充：10px；
浮动：左；
宽度：250px；
身高：100%；
背景色：#22222；
右边距：10px；
}
#代码和注释振打器{
显示器：flex；
宽度：100%；
}
#代码和注释振打器>分区{
弹性基准：100%；
身高：100%；
}
#代码视图{
填充：10px；
/*弹性：0.40%*/
身高：100%；
背景色：#22222；
右边距：10px；
}
#记事本{
填充：10px；
/*弹性：1*/
身高：100%；
背景色：#22222；
}
#代码注释编辑器{
身高：100%；
背景色：#EAEAEA；
}
在许多情况下，flexbox无需使用百分比高度

flex容器的初始设置是
align items:stretch
。这意味着在
flex-direction:row
（与您的代码类似）中，flex-items将自动扩展容器的整个高度

或者，您可以使用
flex-direction:column
，然后将
flex:1
应用于子项，这也可以使flex项扩展父项的整个高度


main{
最大宽度：50%；
利润率：10px自动；
填充：8px；
背景色：红色；
}
#MyClipperRapper{
显示器：flex；
高度：700px；
}
#克利普特纳夫{
显示器：flex；
填充：10px；
宽度：250px；
右边距：10px；
背景色：#22222；
}
#代码和注释振打器{
显示器：flex；
宽度：100%；
}
#代码和注释振打器>分区{
显示器：flex；
弹性基准：100%；
}
#代码视图{
显示器：flex；
填充：10px；
右边距：10px；
背景色：#22222；
}
#记事本{
显示器：flex；
弯曲方向：立柱；
填充：10px；
背景色：#22222；
}
#代码注释编辑器{
弹性：1；
背景色：#EAEAEA；
}
设置您的
显示：flex
填充物和高度会使一对讨厌的夫妇；
考虑到这个例子：

显示：flex；
身高：100%；
垫顶：1vh；

这反过来会使元素的高度达到页面高度，再加上视图高度的1%，当然，还会给您一个比其父元素高的子元素

这并不是对你问题的直接回答，而是对那些在这里寻找他们的子元素可能出问题的原因的人的回答

是否建议在所有元素上设置框大小？我已经做了一段时间了，没有任何问题--这里有一些信息：如果使用外部html，很可能会遇到问题，因为这样做不是标准做法。@StevenJohnston外部html是什么意思？从一个框架，或者可能是您在stackoverflow上发现的问题的解决方案。但是，如果你了解它是如何工作的（你应该这么做），它肯定不是一个难题。
 box-sizing: border-box;