Fix flexbox bug with headers and footers in fixed height tables

glin · Sep 12, 2020 · feba305 · feba305
1 parent 0a04cba
commit feba305
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,3 +1,10 @@
+# reactable 0.2.1.9000
+
+### Bug fixes
+
+* Headers in fixed height tables now display properly in Safari, Chrome, and
+  the RStudio Viewer ([#76](https://github.com/glin/reactable/issues/76)).
+
 # reactable 0.2.1
 
 ### New features

diff --git a/srcjs/reactable.css b/srcjs/reactable.css
@@ -162,10 +162,13 @@ input[type='radio'].rt-select-input {
 }
 
 /**
- * Fix flexbox bug in Safari and Chrome where table body can shrink below its
- * min height when overflowed, causing footers to show up in table body.
+ * Work around flexbox bug in Safari, Chrome, and the RStudio Viewer where
+ * table elements can shrink below their min height when overflowed, causing
+ * elements to overlap.
  * Fixed in Chrome 72+: https://github.com/philipwalton/flexbugs#flexbug-1
  */
+.ReactTable .rt-thead.-header,
+.ReactTable .rt-tfoot,
 .ReactTable .rt-tbody {
   flex-shrink: 0;
 }