How to auto size rows to fit the container in css?

Question

Please see the code below. How can I divide the inner box into six equal height rows? I know that something like this can be acheived with columns in display: grid using grid-template-columns:repeat(auto-fit,minmax(,)

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outerbox {
  display: flex;
  align-items: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
  margin: 0 auto;
}

.item div {
  width: 40vh;
  height: 10px;
  border: 1px solid black;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

Answer 1

You can use display:flex and flex-direction:column on the container, and stretch the items to fill the available space using flex: 1 0 auto on the items.

* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.outerbox {
    display: flex;
    align-items: center;
    height: 100vh;
}

.innerbox {
    width: 40vh;
    height: 40vh;
    background-color: #ced9d5;
    margin: 0 auto;
}

.item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item div {
    width: 100%;
    flex: 1 0 auto;
    border: 1px solid black;
}

<div class="outerbox">

  <div class="innerbox">
    <div class="item">

      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>

    </div>
  </div>

</div>