换种布局方式

scss/_utilities.scss

@@ -1458,17 +1458,14 @@
 }
 
 .hbox {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
 
   & > .col {
-    display: table-cell;
-    vertical-align: top;
-    height: 100%;
-    float: none;
+    flex-grow: 1;
   }
 }
 

scss/components/_card.scss

@@ -131,13 +131,14 @@
 
   &-actions {
     border-top: $Card-borderWidth solid $Card-actions-borderColor;
-    display: table;
+    display: flex;
+    flex-direction: row;
     width: 100%;
     table-layout: fixed;
 
     > a {
       background-color: transparent;
-      display: table-cell;
+      flex-grow: 1;
       border-color: $Card-actions-borderColor;
       border-style: solid;
       border-width: 0 $Card-borderWidth 0 0;

scss/components/_page.scss

@@ -1,4 +1,7 @@
 .#{$ns}Page {
+  width: 100%;
+  height: 100%;
+
   &-header {
     padding: $Page-header-paddingY $Page-header-paddingX;
   }
@@ -21,15 +24,13 @@
   &-headerRow {
     border-bottom: $borderWidth solid $borderColor;
 
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-    border-spacing: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     .#{$ns}Page-header,
     .#{$ns}Page-toolbar {
-      display: table-cell;
-      vertical-align: middle;
+      flex-grow: 1;
     }
 
     .#{$ns}Page-toolbar {
@@ -81,24 +82,19 @@
     }
 
     width: $Page-aside-width;
+    height: 100%;
     border-right: $borderWidth solid $borderColor;
   }
 
   .#{$ns}Page--withSidebar {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    .#{$ns}Page-content {
+      width: 0;
       height: 100%;
-    border-spacing: 0;
-
-    .#{$ns}Page-aside,
-    .#{$ns}Page-content {
-      display: table-cell;
-      vertical-align: top;
-    }
-
-    .#{$ns}Page-content {
-      width: 100%;
+      flex-grow: 1;
     }
   }
 }

scss/components/_tabs.scss

@@ -6,10 +6,7 @@
     list-style: none;
     user-select: none;
 
-    &::before {
-      display: table;
-      content: ' ';
-    }
+    @include clearfix();
 
     > .#{$ns}Tabs-link {
       margin-bottom: -$Tabs-borderWidth;

scss/layout/_hbox.scss

@@ -1,15 +1,12 @@
 .#{$ns}Hbox {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 0;
+  display: flex;
+  flex-grow: row;
   width: 100%;
   height: 100%;
 
   & > .#{$ns}Hbox-col {
-    display: table-cell;
-    vertical-align: top;
-    height: 100%;
-    float: none;
+    flex-grow: 1;
+    width: 0;
   }
 }