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.

[KillerWorm]

Ciao, puoi risolvere con flexbox.

Ti basta applicare display:flex al div contenitore e flex-grow:1 ai due div laterali. Dovrai inoltre togliere i vari posizionamenti, che in questo caso non sono utili.

Qui un esempio trovato su codepen https://codepen.io/vajkri/pen/qOwbex

Per trovare delle altre informazioni puoi fare delle ricerche con termini del tipo "flexbox 3 columns" e aggiungendo magari degli altri termini come "flexible width" o robe del genere.

Inoltre, al capitolo 9 dei link utili CSS puoi trovare varie guide e altro materiale riguardo flexbox.