scroll bar changes content setting

Question

Hello, everybody!

I want the scrollbar on my div to appear only when the Hover is activated and so far so good. The problem is that when the scrollbar appears, the content of the div is thrown to the side and I didn’t want that. Here’s an example of what happens along with a piece of code:

https://jsfiddle.net/gabigbe/9rk2y7ms/27/

div>span {
  color: var(--cor-branca);
  font-family: var(--fonte-light);
  text-align: justify;
  font-size: 100%;
  letter-spacing: 1px;
}

h4>span {
  font-family: var(--fonte-regular);
  color: var(--cor-branca);
}

div>b {
  color: var(--cor-branca);
  font-family: var(--fonte-regular);
}

.grid {
  width: 100%;
  height: 100%;
  border-style: solid;
  border-radius: 2px;
  border-width: 2px;
  border-color: #a8a8a8;
  padding: 10px;
  margin: 15px;
}

.filter {
  display: flex;
  flex-wrap: nowrap;
  margin: 10px;
  align-items: center;
  width: 95%;
}

.selected {
  border-color: var(--cor-amarelo) !important;
  color: var(--cor-amarelo) !important;
}


/*scrollbar*/

::-webkit-scrollbar {
  width: 5px;
}


/*caminho*/

 ::-webkit-scrollbar-track {
  background: #3d3d3d;
}


/*barrinha*/

 ::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 50px;
}

.scroll {
  overflow: hidden;
  width: calc(100% - 5px);
}

.scroll:hover {
  overflow-y: scroll;
  width: 100%;
}

<div class="scroll">
  <div class="row">
    <!--coluna 1-->

    <!--título do gráfico-->
    <div class="col grid text-center selected">
      <h4><span class="selected">NOME DO GRÁFICO</span></h4>

      <!--filtrar gráficos por datas-->

      <div class="filter justify-content-center align-content-center">
        <span> <b>FILTRAR DE</b> &nbsp; </span>
        <input type="date" class="form-control date" />
        <span> <b> &nbsp; ATÉ &nbsp;</b> </span>
        <input type="date" class="form-control date" />
      </div>

      <!--descrição dos gráficos-->

      <div>
        <span class="descriptons">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue orci a
              egestas vestibulum. Aliquam laoreet quis lacus vel pellentesque.</span>
      </div>
    </div>
  </div>

Can someone help me solve this problem?

Note: I am using bootstrap too.

Answer 1

You can decrease the size of the containner when the scroll bar does not appear, and increase when it appears:

.scroll{
    overflow: hidden;
    width: calc(100% - 5px);
}
.scroll:hover{
    overflow-y: scroll;
    width: 100%;
}

The 5px is the size of the scroll, if you want to change its size, you need to change it here too