¿Cómo puedo dejar que un div llene el 100% de ancho si no hay otros elementos al lado?

Tengo un marcado simple como este (un menú de tabs):

Ese es el caso cuando todos los elementos tienen un ancho igual de 33% para llenar el 100% del contenedor.

¿Es posible aplicar una regla general de CSS para todos los contenedores que detecta automáticamente si, por ejemplo, solo hay otro contenedor o ninguno? Y luego ajusta el ancho de las tabs? (“Strech-To-Fit”)

¿Tal vez algo con min-width o min-width max-width ?

Dependiendo de qué navegadores necesite admitir , puede usar flexbox:

 $('.tab').click(function() { $(this).css('display', 'none'); }); 
 .container { display: flex; } .tab { border: 1px solid black; padding: 5px; flex: 1; margin: 5px; } 
 

Click a tab to remove it

Tab 1
Tab 2
Tab 3

¿Quieres decir como flexbox?

 .container { display: flex; height: 50px; margin-bottom: 1em; } [class*="tab"] { flex: 1; border: 1px solid red; } 
 

Puede usar display:table y display:table-cell ver abajo código

HTML:

 
Tab 1
Tab 2
Tab 3

CSS:

 .container { display: table; width:100%; } .tab { border: 1px solid black; padding: 5px; display: table-cell; margin: 5px; }