Enable horizontal scrolling for a div, if childs total width is bigger than its width-CodePudding

I am trying to fit all of these blocks within their container on a single line.

The problem at hand is that the container has a fixed width of 300px.

Each of the smaller items has a width of 100px

What I want to happen is for all of these items to be on a single line, and since their total width is more than the parent width, I want the parent to overflow in x with a scrollbar, but it all must stay contained within the 300px width.

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

CodePudding user response：

You can easily do this with css flexbox.

#boxes {
  display: flex;
  width: 300px;
  overflow-x: scroll;
}

.box {
  flex: 1;
  min-width: 100px;
  min-height: 100px;
  display: inline-block;
  border: 1px solid #010101;
  background: #c8c8c8;
  margin-right: 10px;
}

<div id="boxes">
  <div class="box">Hi I'm box 1</div>
  <div class="box">Hi I'm box 2</div>
  <div class="box">Hi I'm box 3</div>
  <div class="box">Hi I'm box 4</div>
  <div class="box">Hi I'm box 5</div>
  <div class="box">Hi I'm box 6</div>
</div>

CodePudding user response：

Add white-space: nowrap; to the parent container. This will make the child elements to fall in same line.

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
  white-space: nowrap;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

CodePudding user response：

You can solve this using flex-box to the contianer and applying a min-width to childs.

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
  display: flex;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  min-width: 100px;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

CodePudding user response：

You can achieve this using css flexbox.

If you don't know this, you can learn about it here.

.container {
  display: flex;
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: auto;
  border: 1px solid black;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

Give your .container display: flex, and then to prevent your .item from shrinking/growing, add flex-grow: 0; flex-shrink: 0;.

display: flex; will put all children of the element in a single row (be default, you can manipulate direction with flex-direction).

More about flex-shrink, flex-grow here.

Also, you can replace properties width: 100px; flex-grow: 0; flex-shrink: 0; with shorter syntax:

.item {  
  display: inline-block;
  height: 50px;
  flex: 0 0 100px;
}