I'm learning vue js and want to display a flexible display where there are two sections in it. The first section takes 3 grids off the screen and is fixed and cannot be scrolled and is divided into 4 vertical sections.
The second section takes the remaining 9 grids which are divided vertically into 4 parts, each of which can be filled by a dynamic button. When the button displayed exceeds the width of the section, a scrollbar will appear that affects section two.

Image what i want build:

<https://drive.google.com/open?id=1pek5x1yadgy7v0KV7BjM7NLNYONP0EkJ>

What I have done is like this :

```css
.listDevice {
  background-color: darkorange;
  height: 140px;
  overflow: hidden;
  overflow-x: scroll;
}

.data {
  overflow-x: scroll;
  display: flex;
}
```

```html
<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>
```

When I add `display: flex` it change the view badly. Why?