Display:flex;flex-direction:row i przyjmowanie szerokości głównego div'a równą szerokości strony.

Czy się da za pomocą div, nie tabel, by było z racji dla div="trzy" z width:100% i div="szesc" z width:100% szerokość głównego div=main przyjmowała szerokość równą szerokości strony, a wszystkie div z width:100% miały taką samą szerokość równą połowie szerokości strony? Jak poprawić poniższy kod, aby tak było?

<div id="main" style="width:auto;display:flex;flex-direction:row;">
    <div id="raz" style="border: 1px solid lightgrey;">
       <div id="dwa" style="width:auto;">
          <div id="trzy" style="width:100%">
           div-1
          </div>
       </div>
    </div>
    <div id="cztery" style="border: 1px solid lightgrey;">
       <div id="piec" style="width:auto;">
          <div id="szesc" style="width:100%">
           div-2
          </div>
       </div>
    </div>
</div>

Wystarczy napisać:

<div id="main" style="width:auto;display:flex;flex-direction:row;">
    <div id="raz" style="border: 1px solid lightgrey;flex:1 0 auto;">
       <div id="dwa" style="width:auto;">
          <div id="trzy" style="width:100%">
           div-1
          </div>
       </div>
    </div>
    <div id="cztery" style="border: 1px solid lightgrey;flex:1 0 auto;">
       <div id="piec" style="width:auto;">
          <div id="szesc" style="width:100%">
           div-2
          </div>
       </div>
    </div>
</div>