如何阻止大量子元素溢出父div边界？打字测速页面布局问题

问题出在你的.container用了display: flex，但flex容器默认不换行（flex-wrap: nowrap），所有<char>元素会被强行挤在一行，导致内容溢出屏幕。你加的word-wrap这类属性只对文本块生效，对flex项目的排列不起作用。

直接改这几点就能解决：

• 给.container加上flex-wrap: wrap，让flex项目在容器宽度不够时自动换行
• 删掉CSS里.container那行不完整的word-wrap: break-，语法错误会导致样式失效
• 给.container设置max-width: 90vw（或者你需要的宽度），限制容器最大宽度，避免内容撑满整个视口

修改后的完整CSS代码：

:root {
    --bg-color: #0A122A;
    --font-untyped: #7E7F9A;
    --font-correct: #29E7CD;
    --font-wrong: #E65F5C;
    --font-size: 24px;
}

html body {
    color: var(--font-untyped);
    background-color: var(--bg-color);
    font-size: var(--font-size);
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0; /* 可选：去掉默认body边距，避免左右留白 */
}

.wrong {
    color: var(--font-wrong);
}

.correct {
    color: var(--font-correct);
}

.current {
    text-decoration: underline;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 关键：开启flex换行 */
    max-width: 90vw; /* 限制容器最大宽度 */
    margin: 0 auto; /* 可选：让容器水平居中 */
    padding: 1rem; /* 可选：添加内边距，避免内容贴边 */
}

额外优化建议：如果希望<char>元素之间有间距，可以给它们加margin: 0 2px这类样式，提升可读性。

内容的提问来源于stack exchange，提问作者user16835604