У меня есть div шириной, например, 100 пикселей, и когда я помещаю в него контент, этот контент выходит за пределы 100 пикселей вместо того, чтобы отбрасывать одну строку. (Я проверял с помощью инструмента проверки внутри браузера.) Примечание: этот div помещается внутри <li> с display: flex;

Я пытался сделать <div> к float: left; и к display: inline; и к display: inline-block;, но это не сработало...

CSS

.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;
}

Обратите внимание#nav-listявляется гибким элементом.fixed-header (см. в разделе HTML).

HTML

<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>

Мой вопрос:
Как сделать так, чтобы содержимое <div> внутри <li> не выходило за пределы ширины <div>.