Gabotronix
3 months ago
261
0
General

Horizontall scroll in flex container

Posted 3 months ago by Gabotronix

Hi everybody, I want to have horizontal scrolling inside my container of flex items, sadly I can't seem to get it to work and items are shrinking instead of enabling horizontal scrolling inside the wrapper. This is my code:

<div style="width:100%; height:400px; display:flex; position:relative;">
            <div v-border class="" style="width:auto; height:100%; display:flex; overflow-x:scroll !important;">
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px;  flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
                <div style="width:30vw; height:100%; background-color:red; margin:0px 20px 0px 0px; flex:1;"></div>
            </div>
        </div>

Please sign in or create an account to participate in this conversation.