Fix EuiPageContent centering (#527)

This fixes a very old bug introduced when EuiPanel took on flex abilities based upon if it was placed in a flex item. That change broke a couple instances of positioning in EuiPage, where panels nest inside of flex layouts.

This change sets the grow to 0 for EuiPageCOntent, which itself is an EuiPanel. The specificity is changed so we don't need to resort to !important tags.

CHANGELOG.md

@@ -1,6 +1,8 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.28`.
+**Bug fixes**
+
+- Fix `EuiPageContent` centering within `EuiPage` issue ([#527](https://github.com/elastic/eui/pull/527))
 
 # [`0.0.28`](https://github.com/elastic/eui/tree/v0.0.28)
 

src/components/page/page_content/_page_content.scss

@@ -1,16 +1,18 @@
 .euiPageContent {
   width: 100%;
-}
 
-.euiPageContent--verticalCenter {
-  align-self: center;
-}
+  &.euiPageContent--verticalCenter {
+    align-self: center;
+  }
 
-.euiPageContent--horizontalCenter {
-  width: auto;
-  margin: auto;
+  &.euiPageContent--horizontalCenter {
+    width: auto;
+    margin: auto;
+    flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes
+  }
 }
 
+
 @include screenXSmall {
   .euiPageContent {
     border-radius: 0;