CSS Flex - When re-sizing wrapper flex item change its width dimension
<p>I am using CSS Flex in order to display three DIVs consequential in a wrapper.
The width dimension for the first DIV (<code>item0</code>) is to 50px.</p>

<p>I need to change the height of the <code>wrapper</code> and keep the original width for <code>item0</code> and <code>item1</code> DIVs inside the wrapper.</p>

<p>My current problem is that:</p>

<ul>
<li>When re-sizing the <code>wrapper</code>, item for flex (<code>item0</code>) get a different <code>width</code>. size</li>
</ul>

<p>Please click the two buttons in the example to see the change in dimension.</p>

<p>I would like to know:</p>

<ul>
<li>Why the width size change?</li>
<li>How to maintain the width size for <code>item0</code> and <code>item2</code>same as my original CSS settings?</li>
</ul>

<p>Notes:</p>

<p>I understand scroll-bar appears taking space. How I could I keep <code>item0</code> and <code>item2</code> at a fix width and <code>item1</code> stretching to fill up the remaining space? (I have tried to use <code>%</code> but I cannot get the result wanted).</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');

btn0.addEventListener('click', function(event) {
  wrapper.style.height = '25px';
  result.value = item0.getBoundingClientRect().width;
});

btn1.addEventListener('click', function(event) {
  wrapper.style.height = '350px';
  result.value = item0.getBoundingClientRect().width;
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
  width: 250px;
  height: 350px;
  background-color: gray;
  overflow: auto;
}

#flex-container {
  display: flex;
}

#item0 {
  width: 50px;
  background-color: red;
  height: 150px;
}

#item1 {
  width: 150px;
  background-color: orange;
  height: 150px;
}

#item2 {
  width: 50px;
  background-color: pink;
  height: 150px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  &lt;div id="flex-container"&gt;
    &lt;div id="item0" class="item"&gt;a
    &lt;/div&gt;
    &lt;div id="item1" class="item"&gt;b
    &lt;/div&gt;
    &lt;div id="item2" class="item"&gt;c
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;button id='btn0' type="button"&gt;Smaller wrapper&lt;/button&gt;
&lt;button id='btn1' type="button"&gt;Bigger wrapper&lt;/button&gt;
item0 width is: &lt;input id="result"type="text"&gt;</code></pre>
</div>
</div>
</p>