Currently, I am in the process of learning vue js and would like to create a layout that includes two sections. The first section should occupy 3 grids on the screen, be fixed, and not scrollable, with a division into 4 vertical parts. The second section should take up the remaining 9 grids and also be divided vertically into 4 parts, each capable of accommodating a dynamic button. If the buttons exceed the width of the section, a scrollbar should appear affecting section two.
Here is an example of what I aim to build:
https://drive.google.com/open?id=1pek5x1yadgy7v0KV7BjM7NLNYONP0EkJ
This is what I have tried so far :
.listDevice {
background-color: darkorange;
height: 140px;
overflow: hidden;
overflow-x: scroll;
}
.data {
overflow-x: scroll;
display: flex;
}<div class="row">
<div class="col col-lg-3">
<div class="text-secondary text-center">
<div class="text center">
<h4 class="name">
xxxxxx
</h4>
</div>
<div class="text center">
<h4 class="name">
xxxxxx
</h4>
</div>
<div class="text center">
<h4 class="name">
xxxxxx
</h4>
</div>
<div class="text center">
<h4 class="name">
xxxxxx
</h4>
</div>
</div>
</div>
<div class=" col col-lg-9 data">
<div class="listDevice">
<button>AA</button>
<button>AA</button>
<button>AA</button>
<button>AA</button>
<button>AA</button>
<button>AA</button>
</div>
<div class="listDevice">
</div>
<div class="listDevice">
</div>
<div class="listDevice">
</div>
</div>
</div>I noticed that adding display: flex dramatically alters the view. Why does this happen?