diff --git a/packages/@vue/cli-ui/src/App.vue b/packages/@vue/cli-ui/src/App.vue
index 4206a9f41b..ac8d388f7a 100644
--- a/packages/@vue/cli-ui/src/App.vue
+++ b/packages/@vue/cli-ui/src/App.vue
@@ -37,21 +37,18 @@ export default {
@import "~@/style/imports"
.app
- display grid
- grid-template-columns 1fr
- grid-template-rows auto 1fr auto
- grid-template-areas "connection" "content" "status"
+ display flex
+ flex-direction column
-.connection-status
- grid-area connection
+.connection-status,
+.status-bar
+ flex auto 0 0
.content
- grid-area content
+ flex auto 1 1
+ height 100%
overflow hidden
-.status-bar
- grid-area status
-
.app-init-loading
z-index 100000
diff --git a/packages/@vue/cli-ui/src/views/ProjectHome.vue b/packages/@vue/cli-ui/src/views/ProjectHome.vue
index 3df3d03c7e..a3459b0d9f 100644
--- a/packages/@vue/cli-ui/src/views/ProjectHome.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectHome.vue
@@ -6,10 +6,13 @@
}"
>