title: Vue component with height of 100% changes height on v-if re-render
body: <p>I have a Vue component, which has the class "tab-body-wrapper" whose purpose is to display the "slot" for whichever tab is currently active.</p>
  
  <p><strong><em>After troubleshooting, it appears that this ".tab-body-wrapper" component, which I have set a height of 100% in my CSS, reduces in height during the v-if re-render even though the height of the element that contains it (".sub-menu-tabs-body") remains exactly the same at the same point in time.</em></strong></p>
  
  <p><strong>My Vue component (with class of "tab-body-wrapper")</strong></p>
  
  <pre><code>Vue.component("tab", {
      template: `
          &lt;div v-if="isActive"
              class="tab-body-wrapper"&gt;
              &lt;slot&gt;&lt;/slot&gt;
          &lt;/div&gt;
      `,
      props: {
          name: { required: true },
          icon: { required: true },
          selected: { default: false }
      },
      data() {
          return {
              isActive: false
          }
      },
      mounted() {
          this.isActive = this.selected;
      }
  });
  </code></pre>
  
  <p><strong>The red arrow below shows where this Vue component resides within the DOM</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JchTs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JchTs.png" alt="enter image description here"></a></p>
  
  <p><strong>The relevant CSS</strong></p>
  
  <pre><code>.sub-menu-tabs-wrapper,
  .sub-menu-tabs-body,
  .tab-body-wrapper {
      height: 100%;
  }
  </code></pre>
  
  <p>The way I troubleshot my problem was by placing the following code in the mounted() hook of my other Vue component, which is contained in the <strong>slot of the above Vue component</strong>.</p>
  
  <p><strong>Below is the troubleshooting code in the mounted hook of my other Vue component, which resides in the slot.</strong> Note that I also used getBoundingClientRect and the results were the same so the issue is not with d3.</p>
  
  <pre><code>console.log(d3.select(".sub-menu-tabs-wrapper").style("height"));
  console.log(d3.select(".sub-menu-tabs-body").style("height"));
  console.log(d3.select(".tab-body-wrapper").style("height"));
  </code></pre>
  
  <p><strong>On initial render, the heights were as expected:</strong></p>
  
  <pre><code>scripts.js:791 1207px // .sub-menu-tabs-wrapper
  scripts.js:792 1153px // .sub-menu-tabs-body
  scripts.js:793 1151px // .tab-body-wrapper
  </code></pre>
  
  <p><strong>However, upon clicking away and then clicking back onto the tab, you can see that the containing element (".sub-menu-tabs-body") retains its height of 1153px but ".tab-body-wrapper" has shrunk to 574.5px.</strong></p>
  
  <pre><code>scripts.js:791 1207px // .sub-menu-tabs-wrapper
  scripts.js:792 1153px // .sub-menu-tabs-body
  scripts.js:793 574.5px // .tab-body-wrapper
  </code></pre>
  
  <p><strong>What's stranger is that when I console.log the height of ".tab-body-wrapper" afterwards, I get 1151px.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/bNv34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bNv34.png" alt="enter image description here"></a></p>
  
  <p>For some context, the reason why I need the height of ".tab-body-wrapper" to be correct during the render is because I have a bunch of d3 charts that use the height and width of elements within ".tab-body-wrapper" during the render to determine their respective height and width. As such, the issue I am having is causing these charts to render with the incorrect height and width.</p>
  
  <p>Note that using v-show for my tab component is not an option for reasons I will not go into here.</p>