bug #19786 Update profiler's layout to use flexbox (javiereguiluz)

This PR was squashed before being merged into the 2.8 branch (closes #19786).

Discussion
----------

Update profiler's layout to use flexbox

| Q             | A
| ------------- | ---
| Branch?       | 2.8
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | -
| License       | MIT
| Doc PR        | -

### Problem

The layout of the profiler uses some old CSS tricks to make the sidebar look like a same-height sidebar (`margin-bottom: -99999px;` and `padding-bottom: 99999px;`, a large `min-height` in the content, etc.)

This works most of the time ... but there are some edge cases where the sidebar looks ugly (it doesn't have the same height as the main content).

### Solution

This proposal updates the profiler layout to use CSS flexbox.

* It looks and behaves exactly like before ... but it also fixes all the edge cases.
* flexbox has ~90% of global browser support --> so it should be 100% of Symfony developers

---

~~Sadly **there is one issue that I cannot solve**:~~

~~* The "Performance" panel doesn't work on Chrome and Firefox (but it works on Safari!!)~~
~~* The problem is that the `getContainerWidth()` function in `time.html.twig` template doesn't return the right value and the generated canvas has a wrong width.~~

~~Any clues?~~ It's fixed now!

Commits
-------

d986ac0 Update profiler's layout to use flexbox

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

@@ -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 {