When container div shrinks, google map disappears

I have a google map in a div structure like this:

<div style="width:100%;height:100%;">
    <div id="divLeft" style="float:left;width:445px;height:100%;position:relative;overflow-y:scroll;overflow-x:hidden">
    <div id="divRight" style="float:left;width:75%;position:relative">
         <input id="searchTextField" type="text" />
         <div id="map-canvas" style="width:100%;height:100%"></div>
    </div>
</div>

The map-canvas div is the actual map.

All of this works fine until I start resizing the browser window to make it smaller. Or even if the window starts out too small. The google map disappears completely. I have pinpointed the exact pixel width of the window when the map disappears. At 1335 pixel width or more, the map is there. At 1334 pixel width or less, it's gone. Notice the initial width of divRight (the div container of map-canvas) starts at 75%. This seems wrong and arbitrary, but it's all I can find that works. Any higher % and the map disappears from the very beginning. The window height can be anything and the map is fine. It is only the width that causes it to disappear. divLeft needs to be a fixed width of 445px, but I want divRight and map-canvas to fill 100% of the remaining window space.

This doesn't seem to solve the problem either:

$(window).resize(function() {
    google.maps.event.trigger(map, "resize");
});

Also I have tried dynamic resizing stunts with jquery, with no success:

$(window).resize(function() {
    $("#map-canvas").css("width", $("#divRight").width());
    $("#map-canvas").css("height", $("#divRight").height());
    google.maps.event.trigger(map, "resize");
});

Why does the google map want to disappear at a certain width, and how can I solve this?