Flex box last item taking full width of the container. How can i resolve this?

Question

The last row item takes full width however I want the last row item to have the same width as all the other items. I have attached a screenshot illustrating my problem.

Is it feasible with flexbox or i have to use simple css for my requirement? Or I Should use Display Table and table-cell property?

Thanks in advance!

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  width: 1170px
}

.listingResult {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  flex-wrap: wrap;
}

.listingResult>li {
  width: 33.33%;
  -webkit-box-flex: 1 33.33%;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1 .33%;
  /* OLD - Firefox 19- */
  -webkit-flex: 1 33.33%;
  /* Chrome */
  -ms-flex: 1 33.33%;
  /* IE 10 */
  flex: 1 33.33%;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 0 0 30px;
  padding: 10px;
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  flex-wrap: wrap;
}

.listingResult>li .listingResultPic img {
  max-width: 100%;
  height: auto;
}

.listingResult>li .listingResultInfo {
  margin-top: auto;
}

<div class="container">
  <ul class="listingResult">
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,000</h4>
        <p class="address info">Co Rd AFChampion, MI 49814</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1103145">1103145</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">1</li>
          <li class="area">1103 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,500</h4>
        <p class="address info">GenevaIronwood, MI 49938</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1100143">1100143</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">2</li>
          <li class="area">1717 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,500</h4>
        <p class="address info">SaginawNorway, MI 49870</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1104097">1104097</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">1</li>
          <li class="area">828 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,900</h4>
        <p class="address info">NorthWakefield, MI 49968</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1101426">1101426</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">2</li>
          <li class="area">935 sqft</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Answer 1

Set flex-grow to 0. Change flex: 1 33.33% to flex: 0 1 33.33% on the list element.

Here is your working code: https://jsfiddle.net/ecgx58ep/2/

See this link for more information on flex-grow: https://developer.mozilla.org/en/docs/Web/CSS/flex-grow

Answer 2

You can change flex: 1 33.33% to flex: 0 1 33.33%. Now flex-grow will be disabled and the last row will behave.

As you are already setting flex-basis of 33.33% in flex: 0 1 33.33%, you can remove the width: 33.33%.

See demo below:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  width: 1170px
}

.listingResult {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  flex-wrap: wrap;
}

.listingResult>li {
  -webkit-box-flex: 0 1 33.33%;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 1 .33%;
  /* OLD - Firefox 19- */
  -webkit-flex: 0 1 33.33%;
  /* Chrome */
  -ms-flex: 0 1 33.33%;
  /* IE 10 */
  flex: 0 1 33.33%;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 0 0 30px;
  padding: 10px;
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  flex-wrap: wrap;
}

.listingResult>li .listingResultPic img {
  max-width: 100%;
  height: auto;
}

.listingResult>li .listingResultInfo {
  margin-top: auto;
}

<div class="container">
  <ul class="listingResult">
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,000</h4>
        <p class="address info">Co Rd AFChampion, MI 49814</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1103145">1103145</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">1</li>
          <li class="area">1103 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,500</h4>
        <p class="address info">GenevaIronwood, MI 49938</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1100143">1100143</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">2</li>
          <li class="area">1717 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,500</h4>
        <p class="address info">SaginawNorway, MI 49870</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1104097">1104097</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">1</li>
          <li class="area">828 sqft</li>
        </ul>
      </div>
    </li>
    <li>
      <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
      <div class="listingResultInfo">
        <h4 class="price">$12,900</h4>
        <p class="address info">NorthWakefield, MI 49968</p>
        <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1101426">1101426</a></p>
        <ul class="basicInfo">
          <li class="bed">3</li>
          <li class="bath">2</li>
          <li class="area">935 sqft</li>
        </ul>
      </div>
    </li>
  </ul>
</div>