To enable flex items within a flexbox to remain on the same line and display a horizontal scrollbar when needed, you need to apply the following two essential CSS properties to the flex items (i.e. the children of the flexbox):
flex-basis
— to allow you to define the initial space each flex item should occupy within the flex container;flex-shrink: 0
— to prevent flex items from shrinking-to-fit when they become larger than the available space in the flex container.
For example, let's suppose you have the following HTML:
<div id="parent"> <div>Box #1</div> <div>Box #2</div> <div>Box #3</div> </div>
First, you need to ensure that the parent element is set as a flexbox and has overflow-x: auto
set to allow horizontal scrolling when flex items overflow, for example, like so:
#parent { display: flex; height: 90px; justify-content: space-between; overflow-x: auto; }
Please note that the flexbox container element needs to have "flex-wrap: nowrap
" style rule applied as well. However, since nowrap
is the default value of the flex-wrap
property, it can be omitted.
Next, you need to add the flex-basis
and flex-shrink: 0
properties to the flex items:
.child { flex-basis: 50%; flex-shrink: 0; height: 100%; background-color: aqua; }
With these styles applied, each flex item will initially occupy 50%
of the available space before any remaining space is distributed. By setting flex-shrink: 0
, the flex items will not shrink if they surpass the available space, effectively forcing the flexbox to allow overflow, producing a result like the following:
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.