Create a series of squares with horizontal scroll

Question

I'm trying to create a parent container and a series of children. Each child is a square. The children should be on the same single line and there should be a horizontal scroll.

This is the code:

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

As you can see, it doesn't work. There isn't horizontal scroll and children are not 20x20px...

once you fix the shrink issue, you will have the scroll issue (added a duplicate for it) — Temani Afif, Jun 12 '19 at 15:00

score 0 · Answer 1 · answered Jun 12 '19 at 14:59

Add flex-shrink: 0; to the .square. This means do not shrink the size:

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
  flex-shrink: 0;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

score 0 · Accepted Answer · answered Jun 12 '19 at 15:00

Use flex-shrink: 0 on the children of the flex container. This will stop the children from shrinking to fit the width of the parent:

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

MDN: If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

Setting flex-shrink to 0 will counter this.

Create a series of squares with horizontal scroll

2 Answers2