2 ms·
Because the punctuation hangs off the edge, if you don’t have any available space, it can trigger a horizontal scroll bar, which sucks Awesome" CSS model on to
by wruza 3y ago
Because the punctuation hangs off the edge, if you don’t have any available space, it can trigger a horizontal scroll bar, which sucks
Awesome" CSS model on top of a regular (quite limiting) box model in action. Now if you want to have a specific padding, you have to calculate how much space that quote took and subtract it from it. CSS is full of bs like that. Feels like it was taken for its first principles. I don't get how people praise it. Maybe they don't work with it often and only build chains of paragraphs with bells and whistles, while frameworks do all the heavy lifting and conceal learning cliffs.
Before receving arguments on Complexity and Layouts and Variety, I'd like to test HN. Please solve this easy puzzle and explain why your solution is logical, intuitive or sane:
You encounter the following html+css code in a mudball of a frontend.
<div class="parent">
<div class="header">Dynamic-height header</div>
<div class="rest">...many divs...</div>
</div>
.parent { width: 20vw; height: 100vh; }
.header { }
.rest { }
Make .rest vertically (i.e. up and down) scrollable without the help of the internet and without checking your solution or comparing to others before posting. Just post what you think should work and (very optionally) your YOE in CSS/Web. Also feel free to ignore it. Upvoted solutions will receive score. Good luck!
- ioulian 3y agoMaybe I'm missing something about your question, but: ``` .parent {display: flex; flex-direction: column;} .rest {flex-grow: 1; overflow-y: auto;} ```
- wruza 3y agoIt works! Congrats, you did it! But after clicking around you realize that it does not anymore. Waaat? Maybe it's related to sidebar visibility changes? You open the inspector and see that .parent is {display:block}. Seems like some jQuery code assumed that display property is either `block` or `none`. Or something. Aaargh. The "sane" attribute of this solution was violated due to its non-locality to the `.rest`. Who could think that changing the display mode for the parent, which is indeed a private property of the parent, would lead to such an issue. You live and you learn css! (Also, explanations for "intuitive" and/or "logical" are still missing.)
- ioulian 3y agoah yes, jQuery. Indeed hide()/show() just set css to display: none/block, but it can vary (inline/flex/...). CSS is a bit of a mess the last few years, with so many caveats... Just look at why position sticky will sometimes not work: "If you are trying to use position: sticky and it is not working, it is because one of the elements wrapping it is using overflow with a value of hidden, auto or scroll."[1] But it's weird, it should work, or at least this should be documented somewhere. Also why should overflow: hidden break the functionality... If you know all the caveats of css, then you can safely say "I know CSS". [1] https://robertmarshall.dev/blog/solution-to-why-css-position-sticky-is-not-working/ https://robertmarshall.dev/blog/solution-to-why-css-position...