css 100%

Dobrý den,

na pevno definuju velikost divu:

.styl1 {
width: 400px;
height: 300px;
}

<div class="styl1"> </div>

a já potřebuju, aby druhej vnořenej div měl stejnou šířku(výšku), jako má div nad ním, ale aby se řídil tím prvním divem. Napadlo mě to udělat takhle:

.styl1 {
width: 400px;
height: 300px;
}
.styl2 {
width: 100%;
}

<div class="styl1">
<div class="styl2">
</div>
</div>

myslel jsem, že pokud má první div napevno danou šířku "na pevno", tak ten druhý se podle toho uspořádá, ale šířka se nastaví na velikost prohlížeče. Jde mi o to, že chci šířku objektu mít jen u prvního divu, abych jí mohl měnit, kdy chci. Pokud bych dal napevno u všech, tak změna velikosti by byla náročnější. Jak bych mohl takového efektu dosáhnout? děkuju