Maybe someone more experienced knows what to do here, as I'm not sure whether this is even possible with CSS or any other way. Currently I have a parent (100% width) and a couple of child elements. All these children need to stay in one row, so when the parent overflows it simply becomes horizontally scrollable. As for now, the child elements keep shifting into multiple rows when the parents width becomes too small. The snippet contains the exact CSS as it is right now, but I have also tried display: inline-block; instead of float: left;.

.container {
    padding: 16px 24px;
    width: 100%;
}
.parent {
    padding: 24px 24px 16px 24px;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
}
.child {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
    background-color: grey;
    margin-bottom: 16px;
    border-radius: 4px;
    margin-right: 24px;
    height: 255px;
    width: 175px;
    float: left;
    padding: 0;
}

<div class="container">
  <div class-"parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This should work in CSS:

.parent {
    white-space: nowrap;
    overflow: auto;
}
.child {
    display: inline-block;
}

Don't forget to remove float: left and overflow x/y.