Float left without breaking into a second div

Question

I need to show all my divs in single row. Currently it breaks to second row when it reach end of the parent div. I tried adding clear both attribute, then it will show all in single column.

I don't want to add fixed width to my parent div. And it's ok to have a horizontal scrollbar. Any solutions?

Jsfiddle

One code block example

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

.report-body .report-single {
    width: 150px;
    float: left:
    clear: both;
}

Answer 1

try this way

.report-body{

  white-space:nowrap;
  overflow:auto;

}
.report-body .report-single {
    width: 150px;
    display:inline-block;
}

<div class="report-body">


<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>

<div class="report-single mr-2 float-left">
    <div class="report-header">
        Medical 1
    </div>
    <div class="report-body-sm key-div-color4">
        <p class="mb-0">4A</p>
        <p class="mb-0">$25</p>
    </div>
    <div class="report-body-sm key-div-color1">
        <p class="mb-0">2A</p>
        <p class="mb-0">$5</p>
    </div>
</div>
</div>