Synchronize widths using jQuery Resizable not working on different content/word widths

Question

I have a table like structure, that's build with divs (see Fiddle for details). The are always at least two columns.

<div class="wrapper">
  <div class="container">
    <div class="cell ">c_1_1 c_1_1 c_1_1</div>
    <div class="cell ">c_1_2 c_1_2 c_1_2</div>
    <div class="cell ">c_1_3 c_1_3 c_1_3</div>
    <div class="cell ">c_1_4 c_1_4 c_1_4</div>
  </div>
  ...
</div>

The widths of these columns can be changed using jQuery Resizable. Whenever a "cell" is resized, the entire column is resized.

$(document).ready(function () {
  var properties = {};

  $(".cell").resizable({
    handles: "e",
    start: function (e, ui) {
      properties.tableWidth = $(".container").width();
    },
    resize: function (e, ui) {
      var delta = ui.size.width - ui.originalSize.width;
      $(".container").width(properties.tableWidth + delta);
      var index = ui.element.index();
        $(".container").each(function (i, e) {
          $($(".cell", e)[index]).width(ui.size.width);
        });
      }
   });
});

When resizing the cells I encounter the following bug: depending of the content of the cells in the column, some cell will "stop" resizing and will not "hide" the overflown content and the cell widths will no longer be in sync:

How can I correct this? Is there a way of "forcing" the same width on the "cells" regardless of the content width?

Answer 1

Although Amit's answer provided a solution for the widths, it introduced another issue, which was forcing the wrapper to display as a table. For this reason, when resizing a cell, the width of the "rows" did not change and the widths of the "cell" were also "adjusted".

By setting the container to display: flex, all the cell items get correctly resized and the containing objects get automatically resized, i.e. the "newly introduced" problem is no longer present (updated Fiddle).

.container {
  width:600px;  
  border:1px solid black;
  border-right:none;
  display:flex; /*added*/
} 
.cell {
  vertical-align:top;
  display: inline-block;
  width: 150px;
  border-right:1px solid black;
  display: table-cell;
  overflow:hidden; /*added*/
}

Answer 2

change the .container display to table-row will fix the problem.

http://jsfiddle.net/L5ozvsuk/