Weird position absolute chrome bug

css, css-position, google-chrome, html

Solution

Only small thing you have to do and everything else is great. Use this

.schedule-course-slot-wrapper {
position: absolute; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}

instead

.schedule-course-slot-wrapper {
position: relative; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}

Problem

I'm absolutely positioning elements inside floating divs. The last absolutely positioned elements sticks to the top of the div in chrome until we resize the window (see here) Things I tried so far: - Putting a container inside the floating element - Overflow: hidden/auto to the floats, elements and container This only happens in chrome. Any idea why/what is happening?

Original source