javascript - Get height of flexbox row -

i have flexbox container items on each row overflow, , go onto next line. each item aligned baseline; hence, rows can of varying sizes depending on items on row , how align baseline.

the items pictured below being centered @ baseline:

i wondering if there way dynamically row height? or distance each item's baseline top/bottom of row?

i can set hover state around items allow hover stretch on item , have height go way top of each row, hence hover each items follows:

my attempt: codepen

/* on hover want box around item, , have top , bottom of border touching top/bottom of row on */  .flex-item:hover {    border: 1px solid darkred;  }    /* item doesn't move when not hovering */  .flex-item {    border: 1px solid lightblue;  }    .flex-container {    overflow: hidden;    position: relative;    display: -webkit-flex;    display: flex;    -webkit-align-items: baseline;    align-items: baseline;    width: 400px;    height: 350px;    background-color: lightblue;    flex-wrap: wrap;    padding: 10px;  }    .inner-wrapper {    display: inline-block;    text-align: center;    width: 100px;    margin: 10px;    background-color: cornflowerblue;  }    .flex-body {    border-bottom: 1px solid #fff;  }  .flex-body-more {    float: left;    clear: left;    width: 100%;  }  .flex-img {    justify-content: center;    align-items: center;  }

  <div class="flex-container">      <div class="flex-item">        <div class="inner-wrapper">          <div class="flex-title">flex title1</div>          <div class="flex-img">            <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>          </div>          <div class="flex-body">center here</div>          <div class="flex-body-more">more text</div>        </div>      </div>      <div class="flex-item">        <div class="inner-wrapper">          <div class="flex-title">flex title1 longer title</div>          <div class="flex-img">            <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>          </div>          <div class="flex-body">center here</div>          <div class="flex-body-more">more text</div>        </div>      </div>      <div class="flex-item">        <div class="inner-wrapper">          <div class="flex-title">flex title1</div>          <div class="flex-img">            <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>          </div>          <div class="flex-body">center here</div>          <div class="flex-body-more">more text more text more text</div>        </div>      </div>      <div class="flex-item">        <div class="inner-wrapper">          <div class="flex-title">flex title1</div>          <div class="flex-img">            <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>          </div>          <div class="flex-body">center here</div>          <div class="flex-body-more">more text</div>        </div>      </div>      <div class="flex-item">        <div class="inner-wrapper">          <div class="flex-title">flex title1</div>          <div class="flex-img">            <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>          </div>          <div class="flex-body">center here</div>          <div class="flex-body-more">more text</div>        </div>      </div>    </div>

i able make hover effect same height on items changing

.flex-container {     align-items: baseline }  

to

.flex-container {     align-items: strech } 

then added following lines make items align vertically:

.flex-item {     display: flex;     align-items: center; } 

however, original code aligning these items "baseline" instead of "center".. didn't figure out how that.

hope helps.

codepen: https://codepen.io/bottlecap/pen/pegbnx