adding border to flex items in a row aligned to baseline
<p><strong>Question:</strong> How can I get a border to stretch to the height of the parent and surround child cell. Given I am using flexbox and aligning to baseline.</p>

<p>Can this be done with all css?</p>

<p><strong>More Details:</strong>
I am using flex box to align my items in each row to a certain baseline. It is centered on each cell under "center here" in the following picture: </p>

<p><a href="https://i.stack.imgur.com/ErFGpm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ErFGpm.png" alt="using flexbox centered on &quot;center here&quot;"></a></p>

<p>When I hover currently on each item it hovers with a solid line with a 10px margin around each cell: </p>

<p><a href="https://i.stack.imgur.com/kqDXum.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kqDXum.png" alt="hover"></a></p>

<p>I want the on hover border to stretch to the top and bottom of the row on hover like this: </p>

<p><a href="https://i.stack.imgur.com/HlZFtm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlZFtm.png" alt="enter image description here"></a></p>

<p>That way when I hover on each item, their hover border boxes would line up like this: </p>

<p><a href="https://i.stack.imgur.com/cE8dem.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cE8dem.png" alt="enter image description here"></a></p>

<p>^ this is what I would like it to look like if I turn hover on, on each cell. </p>

<p><a href="https://codepen.io/NickDueber-minted/pen/WGAvBd" rel="nofollow noreferrer">codepen</a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
  border: 1px solid darkred;
}

/* so 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;
      &lt;div class="inner-wrapper"&gt;
        &lt;div class="flex-title"&gt;flex title1&lt;/div&gt;
        &lt;div class="flex-img"&gt;
          &lt;img src='http://dummyimage.com/90x40/000/ffffff&amp;text=hi'&gt;
        &lt;/div&gt;
        &lt;div class="flex-body"&gt;center here&lt;/div&gt;
        &lt;div class="flex-body-more"&gt;more text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div class="inner-wrapper"&gt;
        &lt;div class="flex-title"&gt;flex title1 longer title&lt;/div&gt;
        &lt;div class="flex-img"&gt;
          &lt;img src='http://dummyimage.com/40x40/000/ffffff&amp;text=hi'&gt;
        &lt;/div&gt;
        &lt;div class="flex-body"&gt;center here&lt;/div&gt;
        &lt;div class="flex-body-more"&gt;more text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div class="inner-wrapper"&gt;
        &lt;div class="flex-title"&gt;flex title1&lt;/div&gt;
        &lt;div class="flex-img"&gt;
          &lt;img src='http://dummyimage.com/40x90/000/ffffff&amp;text=hi'&gt;
        &lt;/div&gt;
        &lt;div class="flex-body"&gt;center here&lt;/div&gt;
        &lt;div class="flex-body-more"&gt;more text more text more text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div class="inner-wrapper"&gt;
        &lt;div class="flex-title"&gt;flex title1&lt;/div&gt;
        &lt;div class="flex-img"&gt;
          &lt;img src='http://dummyimage.com/90x40/000/ffffff&amp;text=hi'&gt;
        &lt;/div&gt;
        &lt;div class="flex-body"&gt;center here&lt;/div&gt;
        &lt;div class="flex-body-more"&gt;more text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div class="inner-wrapper"&gt;
        &lt;div class="flex-title"&gt;flex title1&lt;/div&gt;
        &lt;div class="flex-img"&gt;
          &lt;img src='http://dummyimage.com/40x50/000/ffffff&amp;text=hi'&gt;
        &lt;/div&gt;
        &lt;div class="flex-body"&gt;center here&lt;/div&gt;
        &lt;div class="flex-body-more"&gt;more text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>