html - adding border to flex items in a row aligned to baseline -

question: how can border stretch height of parent , surround child cell. given using flexbox , aligning baseline.

can done css?

more details: using flex box align items in each row baseline. centered on each cell under "center here" in following picture:

when hover on each item hovers solid line 10px margin around each cell:

i want on hover border stretch top , bottom of row on hover this:

that way when hover on each item, hover border boxes line this:

^ if turn hover on, on each cell.

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>

just few rules you'll need adjust flex items:

.flex-item {     border: 1px solid lightblue;     transition: .7s;     display: flex;     align-items: flex-end; }  .flex-container {     overflow: hidden;     position: relative;     display: -webkit-flex;     display: flex;     width: 400px;     height: 350px;     background-color: lightblue;     flex-wrap: wrap;     padding: 10px;     justify-content: flex-start; } 

see code snippet below:

/* 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;      transition: .7s;      display: flex;      align-items: flex-end;  }    .flex-container {      overflow: hidden;      position: relative;      display: -webkit-flex;      display: flex;      width: 400px;      height: 350px;      background-color: lightblue;      flex-wrap: wrap;      padding: 10px;      justify-content: flex-start;  }    .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>