see this code I want to scroll inside white box and outside box width 100% but here

Question

see this code I want to scroll inside white box and outside box width 100% but here I have set display flex but I if

I am trying to make Inside div scrollable but after few last block goes below instead I want it to be scroblleble. in this code 4th white div goes below aftet three so I want to keep all white block inline and scrollable from only x axis
https://code.sololearn.com/W7d8SolVLV89/?ref=app
https://code.sololearn.com/W7d8SolVLV89/?ref=app

Answer 1

Hi Bhavesh Kalkani,
Why you are using 6 div tags all attached to the main div attribute in your CSS? (in conflict)

To make it easier,
Use a class or id attribute to assign every div tag and work from there on. Its much cleaner and better.👍

<div id="divOne"></div>
<div class="divTwo"></div>

#divOne {
\\ CSS code here
}
.divTwo {
\\ CSS code here
}

Answer 2

This should do the trick:

#divOne {
overflow-y: hidden;
overflow-x: scroll;
}

OR

#divOne {
overflow-x: hidden;
overflow-y: scroll;
}

https://stackoverflow.com/questions/6431101/horizontal-scroll-in-div-with-many-small-divs-inside-no-text

Answer 3

Use flexbox

.outer-container{
/* width:100% */
min-width: 700px;
display: flex;
}

https://code.sololearn.com/WXH8zxoyCt4I/?ref=app

Answer 4

use rm

Answer 5

Try to prefix it

.outer-container{
min-width: 700px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

https://code.sololearn.com/WXH8zxoyCt4I/?ref=app

Answer 6

yes but the question is how to make it scrollable only from horizontaly instead in the code 4th div goes below. I want to be all div horizontaly scroll like you scroll your course in solo learn app

Answer 7

nope it's not working

Answer 8

no but fix width of main container is not responsive