Full Width Flex Items

I am trying to build a div with horizontal scrolling in which each item width is depend upon its content. Here is demo of my problem: jsFiddle Here I want the flex items should ta

Solution 1:

An initial setting on flex items is flex-shrink: 1. This means that flex items can shrink in order to prevent an overflow of the container.

Just disable flex-shrink.

Add this to your code:

.mb-3 { flex-shrink: 0; }

https://jsfiddle.net/gvnqbju7/6/