Problems with OL and Dojo

When using stackcontainers and openlayers3 there is no map display until the main window has been resized

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="http://ol3js.org/en/master/build/ol.js"></script>
        <div data-dojo-type="dijit/layout/StackContainer" data-dojo-id="AppStackContainer" id="AppStackContainer">
            <div data-dojo-type="dijit/layout/ContentPane" title="3dView" id="view3d">      
                <button id="nextStack" data-dojo-type="dijit/form/Button" data-dojo-props="onClick:function(){ createMap(); AppStackContainer.forward()}">
                    Switch View
                </button>   
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="2dView" id="view2d">

                <button id="previousStack" data-dojo-type="dijit/form/Button" data-dojo-props="onClick:function(){AppStackContainer.back()}">
                    Switch Back
                </button>

                <div id="center2D">

                </div>

            </div>
        </div>

CSS

* {
    border: 0;
    padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div#map2d {
                width: 400px;
                height: 400px;
            }
            #AppStackContainer {
                width: 100%;
                height: 100%;
            }
            #center2D {
                width: 100%;
                height: 100%;
            }

JavaScript

require([
                "dijit/layout/StackContainer",
                "dijit/layout/StackController",
                "dijit/layout/ContentPane",
                "dijit/layout/BorderContainer",
                "dijit/form/Button"
            ]);

var map;
            function createMap() {
                if ( map === undefined ) {
                    map = new ol.Map({
                        target: 'center2D',
                        renderer: 'canvas',
                        layers: [
                            new ol.layer.Tile({
                                source: new ol.source.TileWMS({
                                    url: 'http://maps.opengeo.org/geowebcache/service/wms',
                                    params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
                                })
                            })
                        ],
                        view: new ol.View2D({
                            projection: 'EPSG:4326',
                            center: [0, 0],
                            zoom: 0,
                            maxResolution: 0.703125
                        })
                      });
                  }
            }