0

i'm trying to have a horizontal scroll on a parent element but one child need to be vertical scrollable also . Once i make the child element to be vertical scrollable, the width is set to the screen width, but it has the same number of elements as others divs... After making the div marked as line 4 vertical scrollable, the width is set to a specific amount, but i want it horizontally scrollable with others as well line 4 is also vertical scrollable and it creates issues

Here is the code html code :

<div id="container">
<div id="line1">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

<div style="overflow-y: auto;overflow-x:hidden;height:15px;max-width: 100%; white-space: nowrap" id="line4">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

<div id="line2">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>
<div id="line3">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

And the css :

    <style>
    html,body{
        height: 100%;
        overflow: hidden;
    }

    #container {
        height: 100%;
        overflow-x: auto;
        background: red;
    }

    #line1, #line2, #line3, #line4 {
        white-space: nowrap;
        padding: 20px;
        margin: 50px;
    }

    .smallerDivs {
        height: 112px;
        width: 112px;
        margin: 10px;
        display: inline-block;
        vertical-align: middle;
        background: #fff;
    }
</style>
Ion Scorobogaci
  • 147
  • 2
  • 5
  • A good idea is to truncate repetitive elements of code using comments or "…", to make it easier for answerers to read. – Nat Riddle Dec 28 '20 at 15:39
  • agree , will do it next time ... better you suggested something on problem tho ))) – Ion Scorobogaci Dec 28 '20 at 15:44
  • Where do you want the vertical scrollbar for line 4 to appear? – A Haworth Dec 28 '20 at 17:54
  • hey @AHaworth, i want it to be at the end ... but it can be everywhere, the idea is to display all elements on that line and also to be vertical scrollable. – Ion Scorobogaci Dec 28 '20 at 18:00
  • @AHaworth, meaning that when i scroll horizontally the parent div, the line4 should also scroll with the rest of element but at the same time to be vertical scrolable :) .. but once i've added vertical scroll to it , it does not display all the element on that line :( – Ion Scorobogaci Dec 28 '20 at 18:02
  • @AHaworth, here is what happens when scrolling horizontally parent div, line 4 does not display all items because of width i believe :( https://www.photobox.co.uk/my/photo/full?photo_id=503625456558 – Ion Scorobogaci Dec 28 '20 at 18:05
  • Unfortunately I think you are bumping up against this: [link]https://stackoverflow.com/questions/18135204/setting-overflow-y-causes-overflow-x-to-change-as-well where the overflow-x changes to auto (so you see the horizontal scroll bar) when you change the overflow-y. This appears to be what all browsers do. Hmmm. – A Haworth Dec 29 '20 at 12:34

0 Answers0