.ide { display: flex; flex-direction: column; height: 100%; flex-wrap: wrap; } .editor-preview-container { width: 100%; flex: 1 0 0px; display: flex; position: relative; } .editor-console-container { // flex: 1 0 0px; // max-width: 45%; width: 100%; height: 100%; position: relative; // temporary fix for safari min-height: 75vh; } .editor-holder { height: 100%; width: 100%; position: absolute; } .preview-frame { height: 100%; width: 100%; position: absolute; } .preview-frame-overlay { height: 100%; width: 100%; position: absolute; z-index: 10; } .toolbar { width: 100%; } .sidebar { // width: #{180 / $base-font-size}rem; // &.sidebar--contracted { // width: #{20 / $base-font-size}rem; // } width: 100%; height: 100%; }