Solution 1 :

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 */
}
<div id="container">
  <!-- calender element  --->
  <div><b>1</b></div>
  <div><b>2</b></div>
  <div><b>3</b></div>
  <div><b>4</b></div>
  <div><b>5</b></div>
  <div><b>6</b></div>
  <div><b>7</b></div>
  <div><b>8</b></div>
  <div><b>9</b></div>
  <!-- line elements -->
  <span style="--left:0;--top:20px;--height:20px;--width:4"><span></span></span>
  <span style="--left:2;--top:40px;--height:40px;--width:4;--c:red;"><span></span></span>
  <span style="--left:4;--top:100px;--height:10px;--width:3;--c:black"><span></span></span>
  <span style="--left:0;--top:90%;--height:20px;--width:9;--c:purple"><span></span></span>
</div>

Problem :

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:

enter image description here

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;
    }
    <html>
      <body>
      <div id="container">
         <div class="colorone">
           <b>4</b>
           <div class="colorthree"></div>
         </div>
         <div class="colortwo"><b>5</b></div>
         <div class="colortwo" style="float:left"><b>6</b></div>
         <div class="colorone"><b>7</b></div>
      </div>  
      </body>
    </html>

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.

Comments

Comment posted by Paulie_D

It’s not possible with CSS

Comment posted by bigless

What is that blue color in your case? It would help to share your use case too to get best advice.

Comment posted by Temani Afif

@VXp everything is possible with CSS ๐Ÿ˜‰

Comment posted by VXp

@TemaniAfif Not bad, to make it dynamic, JS only needs to cover –left, –width and content’s content/dots. ๐Ÿ™‚

Comment posted by CoolUserName

Thank you for your answer, it helped me so much! But just one thing: how could you place text inside of the spanned elements? The phantom text doesnโ€™t seem to be working.

Comment posted by Temani Afif

@CoolUserName can you show me how it’s not working?

Comment posted by Temani Afif

@CoolUserName with this solution you cannot since I only consider coloration to be used in the span elements. You can ask another quesiton if you want such thing.

By

Leave a Reply

Your email address will not be published. Required fields are marked *