为什么 Div 的背景颜色在导航中不起作用

Question

In this image [1]: https://i.stack.imgur.com/heRuw.png you can see the current state of the nav. The space in-between 'Search for a website' and 'apply for full access' is a div with id logo that has a flex-grow of 1. That div is supposed to be grey but it isn't. Please help.

HTML:

<nav>
    <ul>
        <li href="#" >Home</li>
        <li href="#" >Search for a Website</li>
        <div id="logo"></div>
        <li href="#" >Apply for Full Access</li>
    </ul>
</nav>

CSS:

nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: min-content;
    background-color: rgb(88, 157, 172);
    padding: 0px;
}

ul {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

li {
    display: flex;
    justify-content: center;
    list-style-type: none;
    width: fit-content;
    padding: 1.25em 2em;
    font-size: 1.25rem;
    border-right: 2px solid white;
}

li:hover {
    color: white;
    cursor: pointer;
}

ul > li:last-of-type {
    border-left: 2px solid white;
    border-right: none;
    background-color: orange;
}

div#logo {
    background-color: gray;
    flex-grow: 1;
    height: 100%;
    /* background-image: url(); */
}

Answer 1

Because the div has no content inside it. You will realize that background-color of div is affecting the background color of the content. Like this:

 nav { display: flex; align-items: center; width: 100%; height: min-content; background-color: rgb(88, 157, 172); padding: 0px; } ul { display: flex; width: 100%; align-items: center; margin: 0px; padding: 0px; } li { display: flex; justify-content: center; list-style-type: none; width: fit-content; padding: 1.25em 2em; font-size: 1.25rem; border-right: 2px solid white; } li:hover { color: white; cursor: pointer; } ul > li:last-of-type { border-left: 2px solid white; border-right: none; background-color: orange; } div#logo { background-color: gray; flex-grow: 1; height: 100%; /* background-image: url(); */ }

 <nav> <ul> <li href="#" >Home</li> <li href="#" >Search for a Website</li> <div id="logo">logo</div> <li href="#" >Apply for Full Access</li> </ul> </nav>

But for the problem, using your approach, I think my solution is to have the second last child of the ul use border-right: gray .

 nav { display: flex; align-items: center; width: 100%; height: min-content; background-color: rgb(88, 157, 172); padding: 0px; } ul { display: flex; width: 100%; align-items: center; margin: 0px; padding: 0px; } li { display: flex; justify-content: center; list-style-type: none; width: fit-content; padding: 1.25em 2em; font-size: 1.25rem; border-right: 2px solid white; } li:hover { color: white; cursor: pointer; } ul > li:last-of-type { border-left: 2px solid gray; border-right: none; background-color: orange; } div#logo { background-color: gray; flex-grow: 1; height: 100%; /* background-image: url(); */ }:nth-last-child(2) { border-right: 2px solid gray; }

 <nav> <ul> <li href="#" >Home</li> <li href="#" >Search for a Website</li> <div id="logo"></div> <li href="#" >Apply for Full Access</li> </ul> </nav>