Html 我的内容正在从容器中流出'；s高度

我有这个标记，我给了它一个背景色，但是内容只是从背景色中流出，尽管我给了它100%的高度和一个最小高度

.nav{
填充：0；
显示器：flex；
柔性包装：nowrap；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
高度：40px；
列表样式：无；
边框：1px纯红；
}
李国荣先生{
左侧填充：8px；
右边填充：8px；
}

将

.nav

的高度更新为

auto

，而不是

40px

，这将允许它消耗所需的空间

.nav{
填充：0；
显示器：flex；
柔性包装：nowrap；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
高度：自动；
列表样式：无；
边框：1px纯红；
}
李国荣先生{
左侧填充：8px；
右边填充：8px；
}

这是因为您强制高度使用高度：40px，您需要使用最小高度：40px

看小提琴

---

我已更新CSS，请检查：

.nav{
填充：0；
显示器：flex；
高度：40px；
列表样式：无；
边框：1px纯红；
}
李国荣先生{
填充：8px；
浮动：左；
}

更改：

.nav {
    height: 40px;
    //other codes...
}

.nav {
    height: auto;
    //other codes...
}

至：

.nav {
    height: 40px;
    //other codes...
}

.nav {
    height: auto;
    //other codes...
}

.nav{
填充：0；
显示器：flex；
柔性包装：nowrap；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
高度：自动；
列表样式：无；
边框：1px纯红；
}
李国荣先生{
左侧填充：8px；
右边填充：8px；
}