[Vuejs]-Vuejs: autofit div according to remaining space in window

by

2👍

✅

Why not use CSS’s flexbox to achieve that?

Vue.component('menus', {
  template: '<div id="menu-div">MY MENU</div>'
});

Vue.component('expandable', {
  template: '<div id="expandable-div">EXPANDABLE<div>foo</div></div>',
  computed: {}
});

var vm = new Vue({
  el: '#app'
});
body {
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#menu-div {
  height: 50px;
  background: #768ffb;
  margin-bottom: 5px;
}

#expandable-div {
  background: #76fbc1;
  flex-grow: 1;
}
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <menus></menus>

  <expandable></expandable>
</div>
👤Vucko

Leave a comment