使子行具有弹性行换行内容

Question

我应该在此CSS中进行哪些更改，以使flex行的任何子项包装其子项的内容，而不是与最高的高度匹配？

 .flex-row{
        display: flex;
        flex-direction: row;
    }
    .flex-column{
        display: flex;
        flex-direction: column;
    }

  <div>

        <div class="flex-row">

            <div style="background-color: yellow">
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
            </div>
            <div style="background-color: cyan;">
              Test
            </div>
        </div>

    </div>

Answer 1

您必须在align-items: flex-start上应用.flex-row属性，如下所示：

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start; // Add this
}

.flex-column {
  display: flex;
  flex-direction: column;
}

<div>
  <div class="flex-row">
    <div style="background-color: yellow">
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
    <div style="background-color: cyan;">
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>