Fixed flexbox overflow scrolling issues in firefox
Fixes #111
Showing
2 changed files
with
10 additions
and
2 deletions
| ... | @@ -11,13 +11,16 @@ body.flexbox { | ... | @@ -11,13 +11,16 @@ body.flexbox { |
| 11 | #content { | 11 | #content { |
| 12 | flex: 1; | 12 | flex: 1; |
| 13 | display: flex; | 13 | display: flex; |
| 14 | + min-height: 0px; | ||
| 14 | } | 15 | } |
| 15 | } | 16 | } |
| 16 | 17 | ||
| 17 | .flex-fill { | 18 | .flex-fill { |
| 18 | display: flex; | 19 | display: flex; |
| 19 | align-items: stretch; | 20 | align-items: stretch; |
| 21 | + min-height: 0px; | ||
| 20 | .flex, &.flex { | 22 | .flex, &.flex { |
| 23 | + min-height: 0px; | ||
| 21 | flex: 1; | 24 | flex: 1; |
| 22 | } | 25 | } |
| 23 | } | 26 | } | ... | ... |
| ... | @@ -49,7 +49,7 @@ | ... | @@ -49,7 +49,7 @@ |
| 49 | height:auto; | 49 | height:auto; |
| 50 | } | 50 | } |
| 51 | h1, h2, h3, h4, h5, h6 { | 51 | h1, h2, h3, h4, h5, h6 { |
| 52 | - clear: both; | 52 | + clear: left; |
| 53 | } | 53 | } |
| 54 | hr { | 54 | hr { |
| 55 | clear: both; | 55 | clear: both; |
| ... | @@ -72,7 +72,7 @@ | ... | @@ -72,7 +72,7 @@ |
| 72 | .pointer { | 72 | .pointer { |
| 73 | border: 1px solid #CCC; | 73 | border: 1px solid #CCC; |
| 74 | display: inline-block; | 74 | display: inline-block; |
| 75 | - padding: $-xs $-s; | 75 | + padding: $-s $-s; |
| 76 | border-radius: 4px; | 76 | border-radius: 4px; |
| 77 | box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35); | 77 | box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35); |
| 78 | position: absolute; | 78 | position: absolute; |
| ... | @@ -135,6 +135,7 @@ | ... | @@ -135,6 +135,7 @@ |
| 135 | display: flex; | 135 | display: flex; |
| 136 | transition: width ease-in-out 180ms; | 136 | transition: width ease-in-out 180ms; |
| 137 | margin-top: -1px; | 137 | margin-top: -1px; |
| 138 | + min-height: 0px; | ||
| 138 | &.open { | 139 | &.open { |
| 139 | width: 480px; | 140 | width: 480px; |
| 140 | } | 141 | } |
| ... | @@ -182,6 +183,8 @@ | ... | @@ -182,6 +183,8 @@ |
| 182 | display: flex; | 183 | display: flex; |
| 183 | flex: 1; | 184 | flex: 1; |
| 184 | flex-direction: column; | 185 | flex-direction: column; |
| 186 | + min-height: 0px; | ||
| 187 | + overflow-y: scroll; | ||
| 185 | } | 188 | } |
| 186 | div[tab-content] .padded { | 189 | div[tab-content] .padded { |
| 187 | flex: 1; | 190 | flex: 1; |
| ... | @@ -240,6 +243,8 @@ | ... | @@ -240,6 +243,8 @@ |
| 240 | min-width: 180px; | 243 | min-width: 180px; |
| 241 | max-width: 320px; | 244 | max-width: 320px; |
| 242 | opacity: 0.7; | 245 | opacity: 0.7; |
| 246 | + z-index: 5; | ||
| 247 | + position: relative; | ||
| 243 | table { | 248 | table { |
| 244 | width: 100%; | 249 | width: 100%; |
| 245 | margin: 0; | 250 | margin: 0; | ... | ... |
-
Please register or sign in to post a comment