How to create responsive div widths without @media queries

How to create responsive div widths without @media queries

I have 3 div elements nested in another:
<div id="master" style="width:100%">
<div id="child1">Content1</div>
<div id="child2">Content2</div>
<div id="child3">Content3</div>
</div>
Now #master is a responsive div, who's pixel width will vary with window
size. I would like each child div to have width:33.333% providing that the
content doesn't wrap. If the content does wrap, I would like the widths to
be 100%.
Note the content is variable, so I can't use traditional media queries.
Can anyone think how I could start to approach this?