8 Matching Annotations
  1. Feb 2021
    1. 100vw is 100% of the viewport width not accounting for scrollbars (unless the root element has anything other than overflow: auto set, but auto is the default value). Thus, when the page content overflows the viewport vertically, the browser renders the vertical scroll bar, which reduces the visible viewport area by a few pixels. But the 100vw value doesn't update to account for this, so the selected div retains the same width as before the vertical scrollbar appeared. This results in the horizontal scroll bar rendering.
    1. Now, however, you set width:100vw and that is going to be (in this case) 100% wide (viewport wide) + the vertical scrollbar width. That’s too wide. That induces the HORIZONTAL scrollbar.
    1. Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.
  2. Jan 2021
    1. Great, I can use vw to scale text so it doesn't look puny on a desktop! Perfect... Oh. Huh, now the text is too small to read when viewed on a phone. Okay, well I can just use "max(x,y)" to make sure it doesn't get shrunk beyond a minimum size. Perfect... Oh. Hmm. Looks like "max" isn't supported properly by Chrome. Okay, well guess I'll just use "px" again.
    1. It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.
    1. You can read more about properly sizing the text using a combination of units along with the the calc() function in this excellent article about viewport unit-based typography.