Html 如何使div内容不过度扩展

我有一个div的宽度，例如100px，当我把内容放进去时，这个内容超出了100px，而不是掉一行。（我正在使用浏览器中的inspect工具进行检查。） 注意：此div放置在带有

显示：flex的
中

我已经尝试将
设置为
浮动：左和to
显示：内联和to
显示：内联块但它不起作用

CSS
注意：
#nav list
是
.fixed header
的一个灵活元素（请参见HTML部分）

HTML

物理

BLABLA






我的问题是：

如何使
的内容在
的内部不会超出
的宽度。
基本上你唯一的问题是

.fixed header#导航列表ul.下拉元素{
宽度：15%
}

它使元素相对于可用空间的宽度忽略任何类型的溢出。
所以要解决它，只需删除此规则

.fixed-header #nav-list {
    flex-basis: 80%;
    align-self: flex-start;
}

.fixed-header #nav-list ul {
    list-style: none;

    display: flex;
    justify-content: space-around;
    flex-basis: 100%;   
}

.fixed-header #nav-list ul li {
    display: flex;
    flex-direction: column;
}

.fixed-header #nav-list ul .drop-down-element {
    width: 15%;
}

.fixed-header #nav-list ul li div {
    float: left;
}

<div class="fixed-header">
    <div id="header"><h1>Physi_Cs</h1></div>

    <div id="nav-list">
        <ul>
            <li class="drop-down-element"><a href="#">Shop</a> <div>BLABLA</div> </li>
            <li class="drop-down-element"><a href="#">Learn Physics</a></li>
            <li class="drop-down-element"><a href="#">Articles</a></li>
            <li><a href="SignUpPage.html">Sign Up</a></li>
            <li><a href="LoginPage.html">Log In</a></li>
        </ul>
    </div>
</div>