symfony
diff --git a/‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
Lines changed: 34 additions & 20 deletions b/‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
Lines changed: 34 additions & 20 deletions
@@ -17,9 +17,15 @@ html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:1
 
 {# Basic styles
    ========================================================================= #}
+html, body  {
+    height: 100%;
+    width: 100%;
+}
 body {
     background-color: #F9F9F9;
     color: #222;
+    display: flex;
+    flex-direction: column;
     {{ mixins.sans_serif_font|raw }}
     font-size: 14px;
     line-height: 1.4;
@@ -401,16 +407,34 @@ tr.status-warning td {
     max-width: 1300px;
     padding-right: 15px;
 }
+#header {
+    flex: 0 0 auto;
+}
+#header .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+#summary {
+    flex: 0 0 auto;
+}
 #content {
-    min-height: 1024px;
-    overflow: hidden;
+    height: 100%;
+}
+#main {
+    display: flex;
+    flex-direction: row-reverse;
+    min-height: 100%;
+}
+#sidebar {
+    flex: 0 0 220px;
 }
 #collector-wrapper {
-    float: left;
-    width: 100%;
+    flex: 0 1 100%;
+    min-width: 0;
 }
 #collector-content {
-    margin: 0 0 30px 220px;
+    margin: 0 0 30px 0;
     padding: 14px 0 14px 20px;
 }
 
@@ -428,7 +452,6 @@ tr.status-warning td {
     color: #FFF;
     font-weight: normal;
     font-size: 21px;
-    float: left;
     margin: 0;
     padding: 10px 10px 8px;
 }
@@ -445,7 +468,6 @@ tr.status-warning td {
     fill: #FFF;
 }
 #header .search {
-    float: right;
     padding-top: 11px;
 }
 #header .search input {
@@ -511,10 +533,7 @@ tr.status-warning td {
 #sidebar {
     background: #444;
     color: #CCC;
-    float: left;
-    margin-bottom: -99999px; {# needed for 'same-height columns' trick #}
-    margin-left: -100%;
-    padding-bottom: 99999px; {# needed for 'same-height columns' trick #}
+    padding-bottom: 30px;
     position: relative;
     width: 220px;
     z-index: 9999;
@@ -597,7 +616,6 @@ tr.status-warning td {
 #menu-profiler li {
     position: relative;
     margin-bottom: 0;
-    width: 220px;
 }
 #menu-profiler li a {
     border: solid transparent;
@@ -922,17 +940,13 @@ table.logs .sf-call-stack abbr {
 }
 
 @media (max-width: 768px) {
-    #collector-content {
-        margin-left: 50px;
-    }
-
     #sidebar {
-        width: 50px;
-        overflow-y: hidden;
-        transition: width 200ms ease-out;
+        flex-basis: 50px;
+        overflow-x: hidden;
+        transition: flex-basis 200ms ease-out;
     }
     #sidebar:hover, #sidebar.expanded {
-        width: 220px;
+        flex-basis: 220px;
     }
 
     #sidebar-search {