How to transform the width of an 'infinite' div?

Question

I’m creating an application with multiple columns, each column with multiple labels. On the screen fit approximately 5 columns, at most, after that they start again under the others, like this.

COLUNA1 COLUNA2 COLUNA3 COLUNA4 COLUNA5
COLUNA6 COLUNA7 COLUNA8 COLUNA9 COLUNA10
COLUNA11 ...

I wish that didn’t happen, but that they would always go right, no matter how many I insert, like this.

COLUNA1 COLUNA2 COLUNA3 COLUNA4 COLUNA5 COLUNA6 COLUNA7 COLUNA8 ...

And also insert a vertical scroll bar to see all the columns. In the same way, I need that in each column I insert as many labels as I want, and the column height (with a minimum size) increases according to the number of labels.

My code is like this.

.coluna1 {
    margin-left: 5px;
    margin-right: 5px;
    width: 280px;
    height: 600px;
    background: rgba(0, 0, 0, 0.19);
    float: left;
}

.oportunidade1 {
    padding: 10px;
    color: black;
    background: rgba(69, 164, 255, 0.45);
    border: 1px solid #828282;
}

<section class="content">

    <div class="colunas-status">
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
    </div>


</section>

Answer 1

Face one of the ways to do it is with display:flex and overflow-x:auto, There the columns go getting "infinitely" next to each other without breaking the line.

OBS: I didn’t touch anything in your HTML, I didn’t have to put class in the elements, because you had already put it in, so I just had to make some adjustments like I said in CSS and put flex in the class .colunas-status

Run in Whole Page to better visualize, the snippet here the site has little height and gets bad to test.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.coluna1 {
  margin-left: 5px;
  margin-right: 5px;
  width: 100%;
  height: 600px;
  background: rgba(0, 0, 0, 0.19);
  float: left;
}

.oportunidade1 {
  padding: 10px;
  color: black;
  background: rgba(69, 164, 255, 0.45);
  border: 1px solid #828282;

  width: 280px;
}

.colunas-status {
  display: flex;
  overflow-x: auto;
}

<section class="content">

    <div class="colunas-status">
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>

        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
        <div class="coluna1">
            <div class="oportunidade1">
                <i class="material-icons">edit</i>
                <p>ID: 4 - R$ 700,00</p>
                <p>Rafael MZ</p>
            </div>
        </div>
    </div>

</section>