How to make divs overflow right html-CodePudding

I want the item divs to overflow out of the right side of the parent div so I can scroll to them but no matter what I try, once the divs fill up the first row, instead of overflowing to the right and being clipped, they just start on a new line. How do I fix this?

.mini-display {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*overflow: hidden;*/
  background-color: #333;
  aspect-ratio: 5/0.548;
  height: auto;
  width: 86%;
  margin-left: 0.1%;
  padding-left: 0.5%;
  padding-top: 0.5%;
  padding-right: auto;
  padding-bottom: 0.5%;
  border-radius: 5px 5px 5px 5px;
  overflow-x: scroll;
  overflow-y: none;
}

.mini-display .item {
  overflow: hidden;
  display: inline-block;
  float: left;
  width: 18.6%;
  aspect-ratio: 16/9;
  padding-top: 0px;
  padding-left: auto;
  padding-right: auto;
  padding-bottom: auto;
  /*float: left;*/
  border-radius: 5px 5px 5px 5px;
  border-color: #4f4;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.1%;
  margin-bottom: 3px;
  margin-left: 0.1%;
  margin-right: 0.947%;
  background-color: dodgerblue;
}

<div class='mini-display'>
  <div class='item'>boop</div>
  <div class='item'>bop</div>
  <div class='item'>beep</div>
  <div class='item'>boop</div>
  <div class='item'>bop</div>
  <div class='item'>beep</div>
</div>

CodePudding user response：

Add white-space: nowrap; to the parent div and remove the float from the children:

.mini-display {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*overflow: hidden;*/
  background-color: #333;
  aspect-ratio: 5/0.548;
  height: auto;
  width: 86%;
  margin-left: 0.1%;
  padding-left: 0.5%;
  padding-top: 0.5%;
  padding-right: auto;
  padding-bottom: 0.5%;
  border-radius: 5px 5px 5px 5px;
  overflow-x: scroll;
  overflow-y: none;
  white-space: nowrap;
}

.mini-display .item {
  overflow: hidden;
  display: inline-block;
  width: 18.6%;
  aspect-ratio: 16/9;
  padding-top: 0px;
  padding-left: auto;
  padding-right: auto;
  padding-bottom: auto;
  /*float: left;*/
  border-radius: 5px 5px 5px 5px;
  border-color: #4f4;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.1%;
  margin-bottom: 3px;
  margin-left: 0.1%;
  margin-right: 0.947%;
  background-color: dodgerblue;
}

<div class='mini-display'>
  <div class='item'>boop</div>
  <div class='item'>bop</div>
  <div class='item'>beep</div>
  <div class='item'>boop</div>
  <div class='item'>bop</div>
  <div class='item'>beep</div>
</div>

CodePudding user response：

Another common way to make this happen is to have an outer div with overflow-x: auto and an inner div wrapping the items with display: inline-flex.

.mini-display {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #333;
  aspect-ratio: 5/0.548;
  height: auto;
  width: 86%;
  margin-left: 0.1%;
  padding-left: 0.5%;
  padding-top: 0.5%;
  padding-right: auto;
  padding-bottom: 0.5%;
  border-radius: 5px 5px 5px 5px;
  /* changes */
  overflow-x: auto;
  overflow-y: auto;
}

/* changes */
.mini-display .items {
  display: inline-flex;
}

.mini-display .item {
  display: inline-block;
  aspect-ratio: 16/9;
  border-radius: 5px 5px 5px 5px;
  border-color: #4f4;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.1%;
  margin-bottom: 3px;
  margin-left: 0.1%;
  margin-right: 0.947%;
  background-color: dodgerblue;
  
  /* changes */
  width: 100px;
}

<div class='mini-display'>
  <div class='items'>
    <div class='item'>boop</div><div class='item'>bop</div><div class='item'>beep</div><div class='item'>boop</div><div class='item'>bop</div><div class='item'>beep</div>
  </div>
</div>

CodePudding user response：

I think you can use

display: flex

Also you should try to make the code better and shorter. For example:

padding: 2px 5px 1px 3px;

Not to write:

padding-top: 2px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 3px;

And also for margin and border.

Thus, i think you can write your code like this (If I understand the question correctly):

HTML:

<div class='mini-display'>
 <div class='item'>boop</div>
 <div class='item'>bop</div>
 <div class='item'>beep</div>
 <div class='item'>boop</div>
 <div class='item'>bop</div>
 <div class='item'>beep</div>
</div>

Css:

.mini-display {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction : row;
  width: 18.6%;
  background-color: #333;
  aspect-ratio: 5/0.548;
  height: auto;
  width: 86%;
  margin-left: 0.1%;
  padding: 0.5% auto 0.5% 0.5%;
  border-radius: 5px;
  overflow-x: scroll;
  overflow-y: none;
}

.mini-display .item {
  width: 18.6%;
  aspect-ratio: 16/9;
  padding: 0 auto auto auto;
  border-radius: 5px;
  border: 1px solid #4f4;
  margin: 0.1% 0.947% 3px 0.1%;
  background-color: dodgerblue;
}

Good Luck.