hiding overflow text in flexbox with white space nowrap

Question

I have this code that I am trying to optimize for smaller screens: https://codepen.io/anon/pen/PKmdeb?editors=1100

As you can see, it works fine on desktop (when the window is big) and the images are all the same height. However, when you try shrinking the window all the way to the right, Miami Dade County gets pushed to the second line. I have this:

.city-suggestions-suggestion {
    flex-basis: 50%;
}

meaning I want 2 images to be on each line. As you can see, Boston and Chicago stay together on the same line. This is because they have shorter names, but Los Angeles-Long Beach (a longer name) pushes Miami out. I tried to add this css:

.city-suggestions-suggestion-city {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

But, none of it works. I just want the text to be cut off if it's too long (and preferably show a ... indicating it was cut off) so that the images stay on the same line.

.city-suggestions {
  display: flex;
  flex-wrap: wrap;
  padding: 9px;
}

.city-suggestions-suggestion {
  flex-basis: 50%;
}

.city-suggestions-suggestion-wrapper {
  cursor: pointer;
  min-width: 0px;
}

.city-suggestions-suggestion-city {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.city-suggestions-suggestion-img {
  max-width: 100%;
}

.city-suggestions-suggestion-txt {
  text-align: center;
  background-color: @trueblue;
  color: @white;
  padding: 9px 0;
}


}

}

<div class="city-suggestions" data-reactid="517">
  <div class="city-suggestions-suggestion" data-reactid="518">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="519">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="520">
      <div class="city-suggestions-suggestion-txt" data-reactid="521">
        <div class="city-suggestions-suggestion-city" data-reactid="522">Boston</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="530">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="531">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="532">
      <div class="city-suggestions-suggestion-txt" data-reactid="533">
        <div class="city-suggestions-suggestion-city" data-reactid="534">Chicago</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="542">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="543">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="544">
      <div class="city-suggestions-suggestion-txt" data-reactid="545">
        <div class="city-suggestions-suggestion-city" data-reactid="546">Los Angeles-Long Beach</div>
      </div>
    </div>
  </div>

  <div class="city-suggestions-suggestion" data-reactid="554">
    <div class="city-suggestions-suggestion-wrapper" data-reactid="555">
      <img class="city-suggestions-suggestion-img" role="presentation" src="http://jonvilma.com/images/apple-16.jpg" data-reactid="556">
      <div class="city-suggestions-suggestion-txt" data-reactid="557">
        <div class="city-suggestions-suggestion-city" data-reactid="558">Miami-Dade County</div>
      </div>
    </div>
  </div>