Stop floating divs from wrapping

I want to have a row of divs (cells) that don’t wrap if the browser is too narrow to fit them.

I’ve searched Stack, and couldn’t find a working answer to what I think should be a simple css question.

The cells have specified width. However I don’t want to specify the width of the row, the width should automatically be the width of its child cells.

If the viewport is too narrow to accomodate the rows, then the div should overflow with scrollbars.

Please provide your answer as working code snippet, as I’ve tried a lot of the solutions I’ve seen elsewhere (like specify width: 100% and they don’t seem to work).

I’m looking for a HTML/CSS only solution, no JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}

<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

 Run code snippetExpand snippet

At the moment I’m actually hard coding the width of the row to a really big number.