0

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

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

4th Sep 2018, 8:35 PM
Bhavesh Kalkani
Bhavesh Kalkani - avatar
8 odpowiedzi
+ 3
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 }
4th Sep 2018, 10:24 PM
🌴Vincent Berger🌴
🌴Vincent Berger🌴 - avatar
+ 3
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
4th Sep 2018, 10:43 PM
🌴Vincent Berger🌴
🌴Vincent Berger🌴 - avatar
+ 3
Use flexbox .outer-container{ /* width:100% */ min-width: 700px; display: flex; } https://code.sololearn.com/WXH8zxoyCt4I/?ref=app
4th Sep 2018, 11:41 PM
Calviղ
Calviղ - avatar
+ 2
use rm
5th Sep 2018, 7:28 AM
Calviղ
Calviղ - avatar
+ 1
Try to prefix it .outer-container{ min-width: 700px; display: -webkit-box; display: -ms-flexbox; display: flex; } https://code.sololearn.com/WXH8zxoyCt4I/?ref=app
5th Sep 2018, 12:17 AM
Calviղ
Calviղ - avatar
0
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
4th Sep 2018, 10:28 PM
Bhavesh Kalkani
Bhavesh Kalkani - avatar
0
nope it's not working
4th Sep 2018, 11:56 PM
Bhavesh Kalkani
Bhavesh Kalkani - avatar
0
no but fix width of main container is not responsive
5th Sep 2018, 7:11 AM
Bhavesh Kalkani
Bhavesh Kalkani - avatar