How to align one flex item to top of container while others follow justify-content: center?

Question

I have a two item grid, with the first item being a flex container.

html:

  <div class = "grid">
     <div class="flex">
      <h1>Anchor To Top?</h1>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
   </div>

   <div class = "other-grid-item">
   Other grid item
   </div>
  </div>

css:

.grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}
.flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: blue;
}

You can see the example here: https://jsfiddle.net/tc9kdhb1/3/ . Is there a way I can tell the h1 to remain positioned at the top of the flex container, while the other flex items get positioned in the center of the remaining space?

I attempted to use position: absoltute on the h1 but then the element no longer fits in the container properly. Thanks in advance for any help.

Answer 1

.grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}
.flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: blue;
}
.item{
text-align:center;
}

<div class = "grid">
     <div class="flex">
      <h1>Anchor To Top?</h1>
      
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      
   </div>

   <div class = "other-grid-item">
   Other grid item
   </div>
  </div>

you already achieved that with your code you just forgot to align the text... if i understood correctly what you wanted

Answer 2

If it's convenient to you, you can wrap other divs in a parent div and give it flex: 1

<style>
    .grid{
        display: grid;
        grid-template-columns: 1fr 2fr;
        height: 100vh;
    }
    .flex{
        display: flex;
        flex-direction: column;
        background-color: blue;
    }
    .other-grid-item{
        background-color: yellow;
    }
    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }
</style>
<div class = "grid">
    <div class="flex">
        <h1>Anchor To Top?</h1>
        <div class="content">
            <div>item</div>
            <div>item</div>
            <div>item</div>
            <div>item</div>
            <div>item</div>
        </div>
    </div>

    <div class = "other-grid-item">
        Other grid item
    </div>
</div>