[SOLUCIONADO] 100% width del abuelo

[mamon]

Hola,

Estoy haciendo una web en HTML5 y responsive design.
Tengo esta estructura:

Código HTML:

<div id="quehacemos">
    <div class="columnas">
        <div class="columna" style="background: #F5080C;"></div>
        <div class="columna" style="background: #006CFF;"></div>
        <div class="columna" style="background: #48BC00;"></div>
    </div>
</div> 

Mi idea es que mientras la ventana sea mayor a 660px las columnas estén una al lado de la otra, pero cuando sea menor de ese ancho quiero que cada columna mida el tamaño de la ventana total pero igual una esté al lado de la otra (ya diciendo #quehacemos{ overflow: hidden; } haré que solo se vea una columna).

El tema es que no sé cómo decir que cada columna tenga un 100% de la ventana, ya que el 100% se basa en su padre y no en su abuelo.

Ejemplo

Código HTML:

@media screen and (max-width: 660px){
    div.columnas{
        width: 300%;
    }
    
    div.columna{
        width: 100% !important;
    }
}

El 100% de "DIV.COLUMNA" sería de su padre "DIV.COLUMNAS" y no de su antecesor "DIV#QUEHACEMOS

En resumen, quiero que DIV.COLUMNA tengo el 100% de su "abuelo" y no de su "padre"

[pzin]

Es más bien una cuestión de matemáticas y lógica. Si una cosa mide 300%, no significa que una tercera parte sea igual a 100%, sino que sigue siendo 33% ¿no?

Código CSS:

div.columna{
  width: 33.333%;
}
 

[mamon]

De por si las div.columna miden 33%
Pero solo debe pasar eso cuando sea la ventana mayor a 660px, luego las div.columna deben medir lo que mide la ventana entera pero div.columaS debe medir 300%

Aunque ya vi como hacerlo:

div.columna{
width: inherit inherit
}

Para que herede el ancho de su "abuelo"