fill div elements vertically into a parent div content

Question

I want to fill many div elements vertically into another div element, parent node, like in the below scatch code, but the parent div should be horizontally scrollable, so I have a fixed Height of parent div, and Width should be something Auto value, so I can fill many elements like in result image below, please see the image

Let's say I have this HTML code:

<div id="content" style="width:600px; height:300px;">

   <div id="element1" style="height:25px; width:50px;"> ... </div>
   <div id="element2" style="height:25px; width:50px;"> ... </div>
   <div id="element3" style="height:25px; width:50px;"> ... </div>
   <div id="element4" style="height:25px; width:50px;"> ... </div>
   <div id="element5" style="height:25px; width:50px;"> ... </div>
   ....
   <div id="element_N" style="height:25px; width:50px;"> ... </div>

</div>

What CSS I should use or Javascript, but better if only CSS to get this result:

I tried to use CSS:

display: flex;
flex-direction: column;

have a look at flexbox (assuming you don't have to support older browsers) https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — ADyson, Jul 19 '16 at 10:08
@Paulie_D I tried display: flex; flex-direction: column; but this not help, I dont know well css — , Jul 19 '16 at 10:10
@ADyson Thank You, I will check it, I don't know much about CSS, so I will try everything to find how to do this — , Jul 19 '16 at 10:17
Probably why `flex-direction: column` doesn't work (and see the JS workaround option in the answer): http://stackoverflow.com/q/33891709/3597276 — Michael Benjamin, Jul 19 '16 at 14:53

score 0 · Answer 1 · answered Jul 19 '16 at 10:21

Try this,

#element1,#element2,#element3,#element4,#element5,#elementN{
  display:inline;
  width:50px;
  height:50px;
  margin-left:30px;
  margin-top:30px;
  position:relative;
  border:solid 2px red;
  }

<html>
  <body><div id="content" style="width:600px; height:300px; position:fixed; overflow:hidden; border:solid 2px red;">
<br>
   <div id="element1" style="width:50px;" > ... </div>
   <div id="element2" > ... </div>
   <div id="element3"> ... </div>
   <div id="element4"> ... </div>
   <div id="element5"> ... </div>
    
   ....
   <div id="element_N"> ... </div>

</div>
    </body>
  </html>

Hope this will help.

score 0 · Answer 2 · answered Jul 19 '16 at 10:25

Try this

<div id="content" style="width:100px;overflow-x: scroll;display: inline-flex;">

   <div id="element1" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 1 </div>
   <div id="element2" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 2 </div>
   <div id="element3" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 3 </div>
   <div id="element4" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 4 </div>
   <div id="element5" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 5 </div>
   <div id="element_N" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 6 </div>

</div>

score 0 · Answer 3 · answered Jul 19 '16 at 10:48

Try this, place you child element inside another div under parent div to allow it to scroll at x-axis i.e. vertical scrolling.

#container{
  width:800px;
  height:250px;
  overflow-x:scroll;
  overflow-y:hidden;
}
.con1{
  width:1200px;
  height:250px;
}
.box1,.box2,.box3,.box4,.box5,.box6{
  width:200px;
  height:200px;
  margin:20px;
  background:#111;
  float:left;
}

<div id="container">
<div class ="con1">
<div class ="box1"></div>
<div class ="box2"></div>
<div class ="box3"></div>
<div class ="box4"></div>
<div class ="box5"></div>
<div class ="box6"></div>
</div>
</div>

score 0 · Accepted Answer · answered Jul 19 '16 at 10:51

I think using flexbox will be easier in this case. As you have fixed height content, the flex item will automatically wrap if we specify flex-wrap: wrap;.

Also we need to say overflow-x:auto to have the horizontal scroll. You can check my css from below:

#content{
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;  
  overflow-x: auto;
  width:150px;
  height:100px
}

<div id="content">
   <div id="element1" style="height:25px; width:50px;">1 </div>
   <div id="element2" style="height:25px; width:50px;">2 </div>
   <div id="element3" style="height:25px; width:50px;">3 </div>
   <div id="element4" style="height:25px; width:50px;">4 </div>
   <div id="element5" style="height:25px; width:50px;">5 </div>
   <div id="element5" style="height:25px; width:50px;">6 </div> 
   <div id="element5" style="height:25px; width:50px;">7 </div> 
   <div id="element5" style="height:25px; width:50px;">8 </div>   
   <div id="element5" style="height:25px; width:50px;">9 </div>  
   <div id="element5" style="height:25px; width:50px;">10 </div>  
   <div id="element5" style="height:25px; width:50px;">11</div>              
   <div id="element5" style="height:25px; width:50px;">12</div>  
   <div id="element5" style="height:25px; width:50px;">13</div>        
   <div id="element_N" style="height:25px; width:50px;">N </div>
</div>

You can check this fiddle too. https://jsfiddle.net/beroza/up4ec73x/3/

Thank You, that helped, I found my issue , it was bad HEIGHT value, your answer and @Michael_B comment pointed me in a good direction, thanks again! — , Jul 20 '16 at 11:03

fill div elements vertically into a parent div content

4 Answers4