html - Make right div within container responsive -

i have 2 divs in container, 1 in center , 1 right. want width of right div responsive. currently, max-width on centered 1 works.

see jsfiddle.

how make right div responsive too?

html:

<div id="container">      <div id="middle">centered</div>      <div id="right">make me responsive</div>  </div> 

css:

#container {     width: 100%;     text-align: center;     position: relative; }  #middle {     background: #ddd;     margin: 0 auto;     position: relative;     width: 100%;     max-width:300px;     height:300px;     display: inline-block;     vertical-align: top; }  #right {     background:yellow;     width:100%;     max-width:300px;     display: inline-block;     vertical-align: top;     position: absolute; }   @media screen , (max-width: 350px) {     #right {         display: none;     } } 

the idea use flexbox. , add pseudo element left column, in order make middle 1 in center existing markup.

jsfiddle demo

#container {      display: flex;  }  #container:before, #middle, #right {      border: 1px solid red;      flex: 1 1 0;  }  #container:before {      content:"";  }  #middle {      max-width: 100px;  }

<div id="container">      <div id="middle">centered</div>      <div id="right">responsive</div>  </div>