FlexBox Layout structure

Question

hello I'm trying to make a flexbox layout with the following css and structure:

header/main/footer I did a little research on flex: 1 and ended up not understanding how to apply it and my footer needs to be stickey:

export default function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ flex: "none", background: "blue" }} />
      <div style={{ flex: "1 500px", background: "red" }} />
      <div style={{ flex: "none", background: "yellow" }} />
    </div>
  );
}

example:

https://codesandbox.io/s/throbbing-feather-cmxiq

basically mine I have a problem with the divs that are not appearing for some reason in my body

There's no content or height defined in the header or footer, so they are collapsing to 0 height. — Michael Benjamin, Jan 22 '20 at 22:41
Also, use `height: 100vh`, not `height: 100%`. https://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Jan 22 '20 at 22:42
@Michael_B i use 100% vh on my css body > #emasanext > div { height: 100vh; } — , Jan 22 '20 at 22:48

score 0 · Accepted Answer · answered Jan 22 '20 at 22:44

The inner divs are all empty. And by nature, an empty div will collapse unless given an explicit height.

In your case, the top and bottom divs will end up 0px height, because it's empty and set to not flex, and will not show up at all. The middle one has a flex-basis of 500px, and thus show up as the only visible element. See below for screenshot. Either adding content or setting explicit height (or flex-basis) on header/footer will be a good start.

FlexBox Layout structure

1 Answers1