How can I push my columns wrap fixed height further

Question

Hi and thank to click on this question,

I made a fixed height column with flex and wrap and would have the parent div with a following width. (the parent div stop at the end of the body?)

currently the columns go outside of my parent div

what I am missing in my code ? I'm sure it's so simple :/

<style>ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
height: 200px;
width: auto;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;  
border: 8px solid #121212;
padding: 10px;
}

li {
position: relative;
display: block;
width:300px;
color: #232323;
background: #eee;
padding: 6px 10px;
margin: 4px;
border: 1px dotted #121212;
border-radius: 10px;
}</style>

<div id="outer">
<ul id="list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
    <li>Item #6</li>
    <li>Item #7</li>
    <li>Item #8</li>
    <li>Item #9</li>
    <li>Item #10</li>
    <li>Item #11</li>
    <li>Item #12</li>        
    <li>Item #13</li>
    <li>Item #14</li>
    <li>Item #15</li>
    <li>Item #16</li>
    <li>Item #17</li>
    <li>Item #18</li>
    <li>Item #19</li>
    <li>Item #20</li>
    <li>Item #21</li>
    <li>Item #22</li>
    <li>Item #23</li>
    <li>Item #24</li>
    <li>Item #25</li>
    <li>Item #26</li>
    <li>Item #27</li>
    <li>Item #28</li>
    <li>Item #29</li>
    <li>Item #30</li>
    <li>Item #31</li>
    <li>Item #32</li>      
</ul>
</div>

thanks a lot

score 0 · Answer 1 · answered Jan 15 '21 at 18:09

0

Not sure if I understand you question right, I got it like, that you want to hide everything that's overlapping the parent div?

If so, on your parent div add following css property:

overflow-x: hidden;

This way everything that's outside of your parent div will be hidden. Keep in mind, that the black border will still be behind your child items.

answered Jan 15 '21 at 18:09

Alex Berger

1,357
1
10
22

thanks, hoargarth, it's the inverse, I want the parent div following the li overflow : ) – Quentin Content Jan 15 '21 at 20:18

score 0 · Answer 2 · answered Jan 15 '21 at 18:48

0

You Need to give width of 'li' according to your parent 'ul' width

answered Jan 15 '21 at 18:48

Yash Ganatra

1
2

thanks Yash for your first comment, I would the inverse, have the ul following the li overflow – Quentin Content Jan 15 '21 at 20:19

score 0 · Accepted Answer · answered Jan 17 '21 at 15:04

0

My question have already an answer here :

When flexbox items wrap in column mode, container does not grow its width

This look like been a recurrent problem

answered Jan 17 '21 at 15:04

Quentin Content

23
7

How can I push my columns wrap fixed height further

3 Answers3