Make element fill rest of div without resizing Image

Question

I want the Logo Image in this nav-bar to fill its height while still retaining its aspect ratio. The remaining width should be filled by the ul element.
As long as the ul elements width is not 100% the image is displayed correctly.

http://jsfiddle.net/5o0b4xLd/

How can I do that?

The Code:

<div id="navbar">
<div id="logoBox">
    <img src="http://i.imgur.com/wuRN2wD.png" id="logo">
</div>
<ul>
    <li>
        <a href="#fakelink">
            Item 1
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 2
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 3
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 4
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 5
        </a>
    </li>
</ul>

#navbar {
    display: flex;
    width: 80%;
    height: 3.8em;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
    background: #f39c12;
}

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
}

#logo {
    max-height: 100%;
    max-width: 100%;
}

#navbar ul {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    overflow: hidden;
    width: 100%;
    height: 100%;
    right: 0;
    margin: 0;
    padding: 0;
}

#navbar li {
    display: inline-block;
    padding-left: 4%;
    margin-top: 1.9em;
    line-height: 0;
}

#navbar a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.25em;
}

Answer 1

Your current issue is in the #logo attributes - max-width and max-height won't actually expand the div unless there is content inside that forces it to expand. Also, you'll want to set the background-size = cover so the aspect ratio is maintained.

Try this instead:

#logo { max-height: 100%; height: 100%; background-size: cover; }

Answer 2

here edit your css like following: i added background image & background size to scale image via width. Also hiding the actual image to make it just a placeholder, rest of code is fine.

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
    background:url(http://i.imgur.com/wuRN2wD.png) no-repeat;
    background-size:cover;
}

#logo {
    max-height: 100%;
    max-width: 100%;
    visibility:hidden;
}