CODEWITHSUNDEEP
javascriptcssreactjsflexboxstyled-components
Kyler
Kyler

Reputation: 3

Can't set height to 100% on flex child

I have a fairly straight forward layout in mind, and this involves my body (essentially the content of the page after header) being at least 100% height. This works fine on desktop breakpoints, but as soon as I switch to a mobile breakpoint (which sets container to flex-direction to column), I can't seem to make the body element 100% height. I've tried using 100vh, and it works, but then screws up the layout of the desktop view. Every parent of this body element has a height bigger than it/100%.

I am using flexbox, styled-components, and React.

Any ideas? Thanks!

Body CSS:

  font-family: 'FuturaBold';
  box-sizing:border-box;
  color: black;

  height: 100%;

  display: flex;
  flex-direction: column;

  @media (max-width: ${Breakpoints.tablet}) {
    padding-top: 50px;
  }

Parent CSS:

  min-height: 100% !important;
  box-sizing: border-box;

  background-color: ${Colours.dark};

  display: flex;

  @media (max-width: ${Breakpoints.tablet}) {
    flex-direction: column;
  }

Picture here

Upvotes: 0

Views: 661

Answers (1)

Alex Antonov
Alex Antonov

Reputation: 15146

Combine your approaches.

Set height: 100vh in media query only. This wouldn't screw things up in desktop view

Upvotes: 1

Related Questions