Child inside parent with `min-height: 100%`

README.md

Child inside parent with min-height: 100%

Solution

Screencast

YouTube

Source. TypeScript React

import { memo } from 'react';
import styled, { createGlobalStyle } from 'styled-components';

export default memo(() => (
  <>
    <GlobalStyle />

    <Container>
      <Flex>
        <Content>{content}</Content>
      </Flex>
    </Container>
  </>
));

const content = 'start ' + 'hello '.repeat(500) + 'end';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }
`;

const Container = styled.div`
  height: 100vh;
  overflow: auto;
  background: url('/static/sites/oblika.ru/background.jpg');
  background-size: cover;
`;

const Flex = styled.div`
  display: flex;
  align-items: center;
  min-height: 100%;
  background: #00ff008a;
`;

const Content = styled.div`
  background: lightcoral;
  margin: 5em;
  border: 2em blanchedalmond solid;
  padding: 1em;
`;

Related links

• Child inside parent with min-height: 100% not inheriting height