fix: Better content sizing logic for CenterContent

5app · Aug 29, 2019 · 137294c · 137294c
1 parent 6d6f29a
commit 137294c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/CenterContent/README.mdx b/src/CenterContent/README.mdx
@@ -23,7 +23,7 @@ Instead of defining a height, you can also use the `fillParent` prop which will
 
 <Playground>
 	<CenterContent height={350}>
-		Hello <PodcastIcon />
+		<PodcastIcon vAlign /> Hello
 	</CenterContent>
 
     <div style={{

diff --git a/src/CenterContent/index.js b/src/CenterContent/index.js
@@ -8,6 +8,8 @@ import {paddingProps} from '../styleProps';
 
 const Wrapper = styled.div`
 	display: flex;
+	flex: 1;
+
 	${p =>
 		p.height &&
 		css`
@@ -34,7 +36,8 @@ const Wrapper = styled.div`
 `;
 
 const Content = styled.div`
-	max-width: ${p => (p.width ? pxToRem(p.width) : '100%')};
+	width: ${p => (p.width ? pxToRem(p.width) : 'auto')};
+	max-width: 100%;
 
 	/* Needed for IE11 to contain large items: https://stackoverflow.com/a/42494339 */
 	flex-shrink: 0;