Scroll DIV horizontally with CSS (no javascript)

Example on how to implement an horizontal scroll that adjusts to the content size. An explanation may be found on https://www.kopf.com.br/kaplof/scroll-a-div-horizontally-using-css/

by Bruno Marotta

HTML

<div class="outer">
  <div class="inner">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div>
  </div>
</div>

CSS

.outer {
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  min-height: 100px;
  position: absolute;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 100vh;
}

.inner {
  max-height: 100vh;
  padding: 0px;
  width: 900px; /* for browsers that don't implement calc */
  width: calc((20 * 120px / (100vh - 120px) * 100) * 180);
}

@media all and (max-height: 490px) {
  .inner {
    width: 1260px; /* for browsers that don't implement calc */
    width: calc(7 * 180px);
  }
}

@media all and (max-height: 370px) {
  .inner {
    width: 1800px; /* for browsers that don't implement calc */
    width: calc(10 * 180px);
  }
}

@media all and (max-height: 250px) {
  .inner {
    width: 3600px; /* for browsers that don't implement calc */
    width: calc(20 * 180px);
  }
}

.inner div {
  width: 148px;
  background-color: #888;
  height: 98px;
  margin: 10px;
  padding: 0px;
  display: inline-block;
  border: 1px solid black;
}