Flex elements stacked on top of each other

Question

I am trying to deal with flex and trying my best to create what I need.

What am i trying to do

• Full screen container
• Two div elements, one 640px right- 640px and one left-aligned, occupying the remaining space

What's happening

My items are displayed one above the other in the center of the screen.

the code

 div.flex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; height: 100vh; } div.hero { background-size: cover; background-position: center bottom; position: relative; height: 100vh; width: 100%; margin: auto; } div.timeline { width: 640px; margin: auto; } div.header { position: absolute; top: 50%; text-align: center; width: 100%; /* color: #fff; */ -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); -ms-transform: translate(0, calc(-50% - 66px)); /* IE 9 */ -webkit-transform: translate(0, calc(-50% - 66px)); /* Safari */ transform: translate(0, calc(-50% - 66px)); } 

 <div class="flex"> <div class="hero"> <!-- Header --> <div class="header"> <h1>Title</h1> <h2 class="subtitle">Subtitle</h2> </div> <!-- End header --> <!-- Timeline --> <div class="timeline"> <ul class="timeline-both-side"> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> <li class="opposite-side"> <div class="border-line"></div> <div class="timeline-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p> </div> </li> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p> </div> </li> <li class="opposite-side"> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> </ul> </div> <!-- End timeline --> </div> </div> 

Question

How to use flex for these two elements, both with 100vh and below?

 +------------------------------------------+ |.flex | |+-------------------------+ +------------+| ||.hero | |.timeline || || | | || || | | || |+-------------------------+ +------------+| +------------------------------------------+ 

Answer 1

Simplicity.

 body { margin: 0; } .parent { height: 100vh; display: flex; } .hero { flex: 1; background: red; } .timeline { flex: 0 0 640px; background: green; } 

 <div class="parent"> <div class="hero"></div> <div class="timeline"></div> </div> 

Codepen Demo

Answer 2

Consider these settings for your CSS:

 div.flex { display: flex; /* flex-direction: row; <-- not necessary; default value */ /* flex-wrap: nowrap; <-- not necessary; default value */ /* align-items: stretch; <-- not necessary; default value */ height: 100vh; } div.hero { display: flex; /* nested flex container */ justify-content: space-around; /* moved here from div.flex, but not even necessary */ background-size: cover; background-position: center bottom; position: relative; height: 100vh; width: 100%; /* margin: auto; <-- REMOVE */ } div.timeline { width: 640px; /* margin: auto; <-- REMOVE */ } div.header { flex: 1; } 

Demo

NOTES:

• When you create a flex container (by applying display: flex or display: inline-flex to an element), the child elements become flexible. The descendants of a flexible container outside of children do not become flexible elements and therefore do not accept flexible properties.

  Your div.flex code uses a flex container. This means that his only child - div.hero - is a flexible element. The children of div.hero , however, are not flexible. They remain the standard block elements, so they are stacked vertically.

  Make the div.hero container (nested) flex so that its children become flexible elements.

• margin: auto centers the flexibility element in the container. This is not like what you want, so delete it.

• Absolute positioning applied to .header is optional.
• flex: 1 tells the flex element to use all the free space in the container.

Answer 3

The structure was wrong, .flex had only one child: .hero

You can simplify CSS and split into 2 child containers .hero and .timeline

 div.flex { display: flex; height: 100vh; } div.hero { background-size: cover; background-position: center bottom; position: relative; flex: 1;/* will use whole space left avalaible */ margin: auto; } div.timeline { width: 640px;/* flex values are not usefull here since you want a static width */ margin: auto; } div.header { text-align: center; } 

 <div class="flex"> <div class="hero"> <!-- Header --> <div class="header"> <h1>Title</h1> <h2 class="subtitle">Subtitle</h2> </div> <!-- End header --> </div> <!-- end hero --> <!-- Timeline --> <div class="timeline"> <ul class="timeline-both-side"> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> <li class="opposite-side"> <div class="border-line"></div> <div class="timeline-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p> </div> </li> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p> </div> </li> <li class="opposite-side"> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> <li> <div class="border-line"></div> <div class="timeline-description"> <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p> </div> </li> </ul> </div> <!-- End timeline --> </div>