How Can I Make This Flexbox Container Scroll Instead Of Adapting The Width?

I want to make the flexbox container be 100%width and have a scrollbar to see the overflowing content. Now it seems to adapt the content to the width of the window and it always ta

Solution 1:

As a flex item's flex-shrink defaults to 1, it is allowed to shrink, and it does, unless its content prevents it to do so.

Add flex-shrink: 0; to your #topimg > * rule

Stack snippet

#topimg {
     display: flex;
     min-width:100%;
     overflow-x:scroll;
    }

    #topimg > * {
     margin: 04px00;
     box-shadow: 01px6pxrgba(32, 33, 36, 0.28);
     flex-shrink: 0;                                    /*  added  */
    }

    #topimg#st1 {
     background-color: yellow;
     width: 125px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#nd2 {
     background-color: orange;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#rd3 {
     background-color: cyan;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#th4 {
     background-color:green;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#first {
     background-color: purple;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#second {
     background-color: red;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#third {
     background-color: blue;
     width: 200px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: top;
    }

    #topimg#fourth {
     background-color: fuchsia;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#fifth {
     background-color: brown;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg#sixth {
     background-color: coral;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

<divid="topimg"><ahref="#"id="st1"></a><ahref="#"id="second"></a><ahref="#"id="first"></a><ahref="#"id="third"></a><ahref="#"id="fourth"></a><ahref="#"id="fifth"></a><ahref="#"id="sixth"></a><ahref="#"id="nd2"></a><ahref="#"id="rd3"></a><ahref="#"id="th4"></a></div>

---

As a comparison, if the links were the content, wrapped, it would work as is.

Stack snippet

#topimg {
  display: flex;
  min-width: 100%;
  overflow-x: scroll;
}

#topimg > * {
  margin: 04px00;
  box-shadow: 01px6pxrgba(32, 33, 36, 0.28);
}

#topimg#st1 {
  background-color: yellow;
  width: 125px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#nd2 {
  background-color: orange;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#rd3 {
  background-color: cyan;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#th4 {
  background-color: green;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#first {
  background-color: purple;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#second {
  background-color: red;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#third {
  background-color: blue;
  width: 200px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: top;
}

#topimg#fourth {
  background-color: fuchsia;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#fifth {
  background-color: brown;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg#sixth {
  background-color: coral;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

<divid="topimg"><span><ahref="#"id="st1"></a></span><span><ahref="#"id="second"></a></span><span><ahref="#"id="first"></a></span><span><ahref="#"id="third"></a></span><span><ahref="#"id="fourth"></a></span><span><ahref="#"id="fifth"></a></span><span><ahref="#"id="sixth"></a></span><span><ahref="#"id="nd2"></a></span><span><ahref="#"id="rd3"></a></span><span><ahref="#"id="th4"></a></span></div>