Make child of flex row wrap content

Asked by At

What should I change in this css to make any child of a flex row wrap the content of their children, not match the height the tallest ?

 .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>

1 Answers

0
Anurag Srivastava On

You must apply the align-items: flex-start property on .flex-row like below:

.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>