title: Flex box having 2 div inside it one having canvas inside it
body: <p><strong>Scenerio:</strong></p>
  
  <p>Here is my HTML.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='textbox'&gt;
     &lt;div id="sibling"&gt;&lt;/div&gt;
      &lt;div id='canvasParent'&gt;
          &lt;canvas id="myCanvas" style="border:1px solid #000000"&gt;
      &lt;/canvas&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the js for the same.</p>
  
  <pre><code>function outputsize() {
    console.log(canvasParent)
    canvasParent.clientWidth =  textbox.clientWidth - sibling.clientWidth;
    myCanvas.width = canvasParent.clientWidth;
  }
  outputsize();
  
  new ResizeObserver(outputsize).observe(textbox);
  </code></pre>
  
  <p>Here is the css for the same.</p>
  
  <pre><code>#textbox {
    display:flex; 
    flex-direction:row;
    border:1px solid green;
    flex:1;
  }
  
  #sibling {
    width:200px;
    border:4px solid yellow;
  }
  
  #canvasParent {
    border:2px solid red; 
    flex:1;
  }
  </code></pre>
  
  <p>First <code>div</code> have 2 child divs namely <code>sibling</code> and <code>canvasParent</code>, sibling has fixed width, whereas <code>canvasParent</code> will take the remaining width.
  Currently it is not behaving as expected once we decrease window width then the first <code>div(sibling)</code> is decreasing its width, and the width of other div is constant, whereas I want sibling div to remain at its fixed width once user decrease the window width and the other div to shrink/grow.</p>
  
  <p>Here is the <a href="https://jsbin.com/nuyawegaki/1/edit?html,css,js,console,output" rel="nofollow noreferrer">JSBIN</a> for the same having css, js for the described scenerio.</p>
  
  <p><strong>Expectation:</strong> </p>
  
  <p>Once we resize the window, the first <code>div (sibling)</code> will keep its fixed width and the other div having canvas inside it will shrink/grow based on window resizing, and the canvas inside it will take its parent width(logic for canvas to take its parent div is already written in js file.)</p>
  
  <p>And resizing works fine, once I remove the canvas element from the second div.
  Here is the <a href="https://jsbin.com/yunalumode/1/edit?html,css,js,console,output" rel="nofollow noreferrer">JSBIN</a> that show first div to remain at fixed width and other div to shrink/grow once user reduces windows width.</p>