HTML CSS: when can a child element exceed the limits of the parent element?

:
?
?
?
,HTML,
<div class="parent">
    <div class="child"></div>
</div>
:CSS,:
.parent{
    width:300px;
    height:300px;
    border: 2px solid blue;
}
.child{
    width:400px;
    height:400px;
    border: 2px solid red;    
}

runs in the browser, as shown in the figure, and the first conclusion can be drawn: child elements can exceed the scope limit of the parent element,
and can exceed



:,

,
?



:,

,
?

both horizontally and vertically.

* * so, when can a child element go beyond the parent element horizontally and vertically?
when will it exceed horizontally?
when will it exceed vertically? * *


seems to be designed like this. English or numbers will not automatically wrap in the horizontal direction (so you need to set word-wrap:break-word to force line wrapping), while Chinese will automatically wrap in the horizontal direction.


your perception here is wrong. It's not when to go beyond.
can exceed when overflow is not hidden.
as to when it is horizontal and when it is vertical, it has something to do with line wrapping. Chinese automatic line wrapping, continuous English and numbers are regarded as a word without line wrapping.
the width of the parent node is only the standard of automatic line wrapping.
when the text reaches the maximum width of the parent node, determine whether the text has completed a whole word (or Chinese), wrap the line when it is finished, and continue to exceed it until it is finished.
you can try typing a space between English and you will find

Menu