css - 强制高度未知的 Flexbox 元素上边距

Question

我有一个有两列的 Flexbox 容器，每列都有动态内容，这意味着动态高度。我需要降低右栏，为此我设置了上边距。这不会产生所需的结果，因为底部不会被插入，它仍然与左列的底部对齐(遵循规范，该规范规定 flex 元素默认情况下应具有相同的高度)。 Fiddle供引用。

.container {
  display: flex;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}
.container .component {
  width: 50%;
  box-sizing: border-box;
  /*height: 250px;*/
  border: 1px solid black;
  padding: 0px 10px;
}
.container .right {
  margin-top: 20px;
}

<div class="container">
  <div class="component left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="component right">
    <p>
      Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
      porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
      auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
      tempus a ex non, dictum posuere enim.
    </p>
  </div>
</div>

我需要的可以通过固定高度来实现，但这不够灵活，无法承受奢侈。在上面的代码片段中，取消注释 .container .component 的高度:

.container {
  display: flex;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}
.container .component {
  width: 50%;
  box-sizing: border-box;
  height: 250px;
  border: 1px solid black;
  padding: 0px 10px;
}
.container .right {
  margin-top: 20px;
}

<div class="container">
  <div class="component left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="component right">
    <p>
      Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
      porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
      auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
      tempus a ex non, dictum posuere enim.
    </p>
  </div>
</div>

在上面的示例中您可以看到，由于设置了 margin-top，右列的顶部和底部都有 20px 偏移量。有没有一种方法可以在不显式设置列高度的情况下实现此结果？

Answer 1

一种选择是在 .left 上添加 margin-bottom: 20px

.container {
  display: flex;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}
.container .component {
  width: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  padding: 0px 10px;
}
.container .right {
  margin-top: 20px;
}
.container .left {
  margin-bottom: 20px;
}

<div class="container">
  <div class="component left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="component right">
    <p>
      Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
      porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
      auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
      tempus a ex non, dictum posuere enim.
    </p>
  </div>
</div>