javascript - CSS Styling fill space left in the left of the element and the right of the element -

imagine element, centered in container, has width, don't know exact width, text , want left space , right space same , colored, this:

----------------- test -----------------

#left {    background-color: red;  }  #middle {    width: 200px;    /* might different */  }  #right {    background-color: red;  }

<div id="left"></div>  <div id="middle"></div>  <div id="right"></div>

    .container{        display:flex;     }      .main-body{        flex:1 1 auto;     }     #left{         background-color: red;    }    #middle{         width: 200px;        text-align:center;   }     #right{         background-color: red;     }   <div class="container">     <div class="main-body" id="left"></div>     <div id="middle">hello</div>     <div  class="main-body" id="right"></div>   </div>