Move Child's Overflow To Next Row If Current Row's Width Too Narrow

Question

EDIT: I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.

I'm a beginner to HTML&CSS and have a pretty straightforward question, but i just can't seem to find the answer: How can you make a child div overflow to the next row(of divs, etc.) if there isn't enough space on the screen(or on the row of divs) to fit the whole child div? And could you do it with only HTML&CSS(if possible) at most a bit of JavaScript? Here's what i mean should happen:

As you see, because the blue child div overflows to the second row of divs because it is to large to fit in just the first row. Currently, if my blue div is too large, it will just overflow to the side(run code below).

    html, body {
      left: 0;
      margin: 0;
      background:white;
      height:100%;
    }
    
    b{
      font-family:calibri;
      padding-left:10px;
    }
    
    #container{
      margin: 20px auto;
      width:300px;
      height: 150px;
      border: 1px;
      position:relative;
    }

    .colorone{
      background:#FFEB3B;
      width:150px;
      height: 150px;
      float:left;
    }
    .colortwo{
      width:150px;
      height: 150px;
      background:#8BC34A;
      overflow:hidden;
    }
    .colorthree{
      left: 10px;
      position: absolute;
      width: 150%;
      height: 20px;
      background:blue;
      overflow:hidden;
    }

I've searched and researched online & on Stack Overflow but I still can't seem to find the answer, and barely any questions on it, so any help would be greatly appreciated.

user_8620333 · Answer

Here is a very crazy idea relying on inline element and linear-gradient.

#container {
  margin: 20px auto;
  width: 450px;
  display:flex;
  flex-wrap:wrap;
  position:relative;
}
#container > * {
  width:33.33%;
  height: 150px;
  background: #FFEB3B;
}
#container > *:nth-child(odd){
  background: #8BC34A;
}

#container > span {
  /* cover all the container */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* */
  background:none!important;
  line-height:150px; /* same as height here */   
  font-size: 130px; /* a big font-size to cover more area */
  overflow:hidden; /* hide extra overflow of the "phantom" text */
  text-align:justify; /* we justify the "phantom" text to span until the end */
}
/* the below inline element will wrap different lines and will cover all the grid
   and since the line-height = height, we will have a perfect illusion of a continuous line
   over the different cells */
#container > span span {
  background:
      linear-gradient(var(--c,blue) 0 0)     /* the color */
      calc(var(--left)*150px)  var(--top)/   /* the position */
      calc(var(--width)*150px) var(--height) /* the size */
      no-repeat; 
}
#container > span span:before {
   content:". . . . . . . . . ."; /* phantom text to fill the inline element*/
   font-size: 300px; /* big enough to avoid having a long phantom text but not too much to make sure there is at least two characters per line to trigger the justify */
   line-height:0; /* we obey the to above line-height */
   visibility:hidden; /* we don't need to see the text */
}

Move Child's Overflow To Next Row If Current Row's Width Too Narrow

1 Answers