CSS Table Forced Wrapping

I have a three column CSS based table layout. The table is designed to have the first two columns squeezed down to its minimum width relative to the content that fill them so that the third column can fill most of the view. Sounds pretty simple right? Well, the third column keeps giving me troubles.

The table is part of a Webkit (Safari-based) application and its built to fill the full width of the window given no matter how much it is resized. Therefore, no default widths are defined. So when it comes to wrapping blocks of text such as a URL or just plain repeated character spam it just continues on without a wrap.

I am aware of the "word-wrap: break-word;" option but that does not work because I cannot define the width unless I know the width of the children. I also have tried "word-break: break-all;" — That works but it is not eye appealing to see a wrap in the middle of a word which legitimately could be cut from a space.

Is anyone aware of a pure HTML & CSS 3 solution to have two child boxes and a third which can wrap long text without having to use JavaScript or other means?

Examples of Layout and Code:

--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------

<div class="table_class">
<div class="table_row">
<div class="cell1">data</div>
<div class="cell2">data</div>
开发者_运维知识库<div class="cell3">datadatadatadata…</div>
</div>
</div>

---

If you're displaying tabular data, and trying to make your divs look like a table, why not just use a table? They're designed to have the type of behavior you're describing:

http://jsfiddle.net/Mk7jS/1/

---

Is this table layout being used for tabular data? Because, in that case, you should use tables.

The reason tables are bad is when they are used for graphical layout. They break the semantic design of a website. However, if the content is tabular, then you should use tables. They already solve the issue of layout out rows and columns nicely.

Alternatively, if you need to keep the div layout, then you can use the table, table-row, and table-cell display properties.