css - 带 flex 的内联 div

Question

假设我有 2 个应该内联的 div，如果内容多于父 div，我想让第二个 div 增长到第一个 div 以下。现在当我添加 flex 并使它们内联时，它看起来像这样: JSFiddle

是这样的:

有什么建议吗？

Answer 1

这对于 flexbox 是不可能的。

但是，如果您制作所需的元素display:inline，它就是。

.field,
.field-items,
.field-item {
  display: inline;
}

h2 {
  margin-top: 0;
  display: inline;
}

<div class="group-title-wrapper">
  <div class="field field-name-post-date field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even">08 January</div>
    </div>
  </div>

  <div class="field field-name-title field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even" property="dc:title">
        <h2>Vokalia and Consonantia, there live the blind texts.Lorem ipsum dolor amet schlitz ennui taxidermy bespoke vinyl lyft iceland selfies quinoa intelligentsia. Tacos semiotics yuccie fam photo booth hella health goth kitsch whatever waistcoat.</h2>
      </div>
    </div>
  </div>
</div>