CODEWITHSUNDEEP
htmlcssresponsive-design
Scott Selby
Scott Selby

Reputation: 9580

use CSS to continue overflow list to next column of parent

Basically I have a parent Container <div> and then I have children elements in there that are aligned using display: flex;flex-direction:column;flex-wrap:wrap;. So far the desired layout is that the container has a fixed height and will scroll to the right as more and more content gets added to he children elements .

All of the children elements will have a fixed width and get stacked in Columns starting in the top left going down then the next row to the right top to bottom.

I have all this working correctly so far , My problem is...

What if one of the children elements is a <ul> and lets say that now this new list has <li> that overflow their parent. What happens is that the <ul> will grow in height and then will be moved over to the next column. I do not want that to happen. I want the <ul> to start just where it normally would if it wasn't overflowing and then somehow I am looking for a way for the children <li> elements to move to the next row of the lists' Container all the way up at the top like my image that I drew in MS Paint - not the best visual aid - sorryenter image description here

I also tried to re-create a stripped down version in a fiddle right here

This is code from fiddle that creates just a very basic container with come children that show the "problem" or I should say just un-desired results that are currently happening

<div class="container">
  <div class="child"> </div>
  <p class="text child"> </p>
  <ul class="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>uno</li>
    <li>doce</li>
    <li>tries</li>
    <li>quatro</li>
    <li>sinco</li>
    <li>siete</li>
    <li>ocho</li>
    <li>nueve</li>
    <li>doce</li>
    <li>tries</li>
    <li>quatro</li>
    <li>sinco</li>
    <li>siete</li>
    <li>ocho</li>
    <li>nueve</li>
  </ul>
</div>

and the CSS

.container{border:2px solid blue; width:1000px; height:350px; display:flex; 
       flex-direction:column;flex-wrap:wrap; position:relative;padding:3px;} 

.text{ height:75px;width:200px;border:2px dotted red;display:inline-block; }

.list{flex-wrap:wrap;flex-direction:column;display:flex;width:165px;height:75px;
   border:2 px dashed purple;}

.list li{;flew-wrap:wrap;display:flex;width:200px}

.container div{height:100px;width:200px;border:2px dotted green;display:inline-block;}

Upvotes: 1

Views: 2869

Answers (1)

user1429980
user1429980

Reputation: 7158

Try using columns/-webkit-columns:

.container [
    columns: 3;
    -webkit-columns: 3;
}

Updated fiddle.

Upvotes: 2

Related Questions