Fixed flexbox overflow scrolling issues in firefox

Fixes #111

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index ddba1ee03c2e52ff874e5bf32239bfc5b767c3ee..2fe1ad113cb7264ef72e7e9d504b1a0abe5a0916 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -11,13 +11,16 @@ body.flexbox {
   #content {
     flex: 1;
     display: flex;
   #content {
     flex: 1;
     display: flex;

+    min-height: 0px;

   }
 }
 
 .flex-fill {
   display: flex;
   align-items: stretch;
   }
 }
 
 .flex-fill {
   display: flex;
   align-items: stretch;

+  min-height: 0px;

   .flex, &.flex {
   .flex, &.flex {

+    min-height: 0px;

     flex: 1;
   }
 }
     flex: 1;
   }
 }

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index ff1b47cd701df43806854d111d2e80219be1d6f5..e61e0c8232ad3664a90ddcd77086b2cfe41fcc0e 100644 (file)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -49,7 +49,7 @@
     height:auto;
   }
   h1, h2, h3, h4, h5, h6 {
     height:auto;
   }
   h1, h2, h3, h4, h5, h6 {

-    clear: both;
+    clear: left;

   }
   hr {
     clear: both;
   }
   hr {
     clear: both;


@@ -72,7 +72,7 @@
 .pointer {
   border: 1px solid #CCC;
   display: inline-block;
 .pointer {
   border: 1px solid #CCC;
   display: inline-block;

-  padding: $-xs $-s;
+  padding: $-s $-s;

   border-radius: 4px;
   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
   position: absolute;
   border-radius: 4px;
   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
   position: absolute;


@@ -135,6 +135,7 @@
   display: flex;
   transition: width ease-in-out 180ms;
   margin-top: -1px;
   display: flex;
   transition: width ease-in-out 180ms;
   margin-top: -1px;

+  min-height: 0px;

   &.open {
     width: 480px;
   }
   &.open {
     width: 480px;
   }


@@ -182,6 +183,8 @@
     display: flex;
     flex: 1;
     flex-direction: column;
     display: flex;
     flex: 1;
     flex-direction: column;

+    min-height: 0px;
+    overflow-y: scroll;

   }
   div[tab-content] .padded {
     flex: 1;
   }
   div[tab-content] .padded {
     flex: 1;


@@ -240,6 +243,8 @@
   min-width: 180px;
   max-width: 320px;
   opacity: 0.7;
   min-width: 180px;
   max-width: 320px;
   opacity: 0.7;

+  z-index: 5;
+  position: relative;

   table {
     width: 100%;
     margin: 0;
   table {
     width: 100%;
     margin: 0;