div affiancati dinamici senza js o jquery

[ottaviane]

Salve a tutti.
Ho googlato tanto ma non riesco a risolvere il mio problema:
ho tre box allineati in orizzontale:

<div id='center'>
                <div id='left-panel'></div>
                <div id='center-panel'></div>
                <div id='right-panel'></div>
            </div>

e questo è il css:

#center {
  /*! height: 100%; */
  width: 100%;
  background: aquamarine;
  top: 100px;
  bottom: 30px;
  position: absolute;
}

#left-panel {
  left: 0px;
  height: 100%;
  background: blueviolet;
  width: 100px;
}

#center-panel {
  background: chocolate;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 100px;
  right: 100px;
}
#right-panel {
  height: 100%;
  background: #272575;
  width: 100px;
  right: 0px;
  position: absolute;
  top: 0px;
}

vorrei ottenere che il div centrale si adattasse in base alla larghezza del div sinistro o destro a riempire orizzontalmente. Se infatti ridimensiono il div destro, per esempio, mi devo occupare di ridimensionare anche il div centrale. Come faccio a far fare ciò in automatico senza utilizzo di ulteriore js?
Come posso dire al div centrale di adattarsi allineandosi al div di sinistra e a quello di destra?
grazie.ciao.