Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop flex items stacking on top of each other

Tags:

html

css

flexbox

I'm trying to get to grips with flex and am struggling to create what I'm after.

What I'm trying to do

  • Full screen container
  • Two div elements, one right-aligned with a width of 640px and one left-aligned taking the remaining space

What's happening

My elements are displaying, on top of one another, in the centre of the screen.

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 can I use flex to have these two elements, both with 100vh, in a row like below?

+------------------------------------------+
|.flex                                     |
|+-------------------------+ +------------+|
||.hero                    | |.timeline   ||
||                         | |            ||
||                         | |            ||
|+-------------------------+ +------------+|
+------------------------------------------+
like image 513
Ben Avatar asked Feb 16 '16 14:02

Ben


People also ask

How do you put flex items on top of each other?

To display the items vertically, use flex-direction: column and the items will stack on top of one another in a column instead of side-by-side in a row. "and positions it relative to it's closest positioned parent" - this would be true if parent's position was anything but default(static).

How do you prevent Flex from growing height?

By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch.


1 Answers

Simplicity itself.

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

like image 197
Paulie_D Avatar answered Sep 21 '22 08:09

Paulie_D