html - 停止 flex 元素相互堆叠

Question

我正在努力掌握 flex 并努力创造我想要的东西。

我想做什么

• 全屏容器
• 两个 div 元素，一个右对齐，宽度为 640px，一个左对齐，占用剩余空间

发生了什么

我的元素一个接一个地显示在屏幕中央。

代码

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>

问题

我如何使用 flex 让这两个元素都具有 100vh，像下面这样排成一行？

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

Answer 1

简单本身。

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