为什么我的 flexbox 项目在父宽度改变时没有对齐？

Question

我遇到了 flexbox 的问题。
我想做的是：

我差点做到了
但是，出于未知原因（对我而言），如果 width（div 或浏览器的）太小，则不再对齐。问题似乎是因为多个lorem ipsum，但我不明白为什么。

.timeline {
  display: flex;
}

.timeline>div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

.events {
  width: 50%;
}

.date,
.relative,
.events {
  border: 1px solid green;
}

.date,
.relative {
  width: 80px;
}

<!DOCTYPE html>
<html lang="fr">

<head></head>

<body>
  <div class="timeline">
    <p class="date">a1</p>
    <p class="relative">a2</p>
    <div>
      <div class="events"></div>
      <div class="events"></div>
    </div>
  </div>

  <div class="timeline">
    <p class="date">b1</p>
    <p class="relative">b2</p>
    <div>
      <div class="events">
        <p>Lorem ipsum</p>
      </div>
      <div class="events">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ium Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
</body>

</html>

你知道发生了什么事吗？非常感谢。

Answer 1

使用 flex: 1; 代替 flex-grow: 1;。

flex: 1; 是 shorthand 用于：

flex-grow: 1; = 元素将按与 window-size

相同的比例增长

flex-shrink: 1; = 元素将按与 window-size

相同的比例收缩

flex-basis: 0; = 元素本身没有起始值，将根据可用的屏幕尺寸占用屏幕，例如：- 如果包装器中有 3 个 div，则每个 div 将占用 33%。

以上来源：

.timeline {
  display: flex;
}

.timeline>div {
  display: flex;
  border: 1px solid red;
  flex: 1;
}

.events {
  width: 50%;
}

.date,
.relative,
.events {
  border: 1px solid green;
}

.date,
.relative {
  width: 80px;
}

<!DOCTYPE html>
<html lang="fr">

<head></head>

<body>
  <div class="timeline">
    <p class="date">a1</p>
    <p class="relative">a2</p>
    <div>
      <div class="events"></div>
      <div class="events"></div>
    </div>
  </div>

  <div class="timeline">
    <p class="date">b1</p>
    <p class="relative">b2</p>
    <div>
      <div class="events">
        <p>Lorem ipsum</p>
      </div>
      <div class="events">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ium Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
</body>

</html>

为什么我的 flexbox 项目在父宽度改变时没有对齐？

Why are my flexbox items misaligned when the parent width changes?

css

flexbox

alignment