How do i make make a div inside a container have an image that is sized like its other div siblings?

I have a parent div container named "nav" that acts as navigational bar along with child divs that act as choices.

The problems: I would like to have an image all the way to the left, inside this nav bar. However it simply does not show up(no width) unless i make the div "logo" have a fixed width and height. When i do, the image will not appropriately re-size to fit inside the div. I only see a portion of the image. Also i want the div/image to scale relatively to the size of the div "name", not the other way around. As an example give div "logo" a width/height of 100px and see that it changes the sizing of the div "nav". The image should re-size to the same height as the div "name". If the div "name" has a height of 30px then the div "logo" should be 30px in width and height(give or take a pixel).

How do i do this? Is it possible with divs? If not what is the closest way i could do this(i would prefer to use divs)?

Code: http://ift.tt/1kqNvf1

html, body {
    height: 100%;
    margin: 0px;
    font-family:'Myriad Pro Regular';
    color:#1E3264;
}
.flexer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
div#nav {
    position:relative;
    width:100%;
    background: white;
    box-shadow: 0px 0px 3px 1px #888888;
}
div#logo {
    background-size:contain;
    background: url('http://ift.tt/1QahXXb') center center no-repeat;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
}
div#name {
    padding: 0% 5% 0% 5%;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
    font-size:2em;
    align-items:center;
    justify-content: center;
}

<div id="nav" class="flexer">
    <div id="logo" class="flexer"></div>
    <div id="name" class="flexer">Choice1</div>
</div>