DEV Community: EmmahNcodes

Fix for css grid item Overflow

EmmahNcodes — Mon, 27 Mar 2023 20:38:35 +0000

The problem

I recently ran into an interesting problem when creating scroll containers. I've created a ton of scroll containers but for some reason, I couldn't get this to work. This usually happens when we have a scroll container nested in a grid item.

Even though we have overflow: scroll and width:100% set on our flex layout(the nested scroll-container), we still can't scroll, and the layout looks broken. This is because the minimum content size of a grid item is auto, meaning that a grid item can expand its width to contain its children, which in this case is our scrolling container(without overlapping content). The styles of overflow: scroll and width:100% never get applied because the flex scroll container is within our grid item, the rules of minimum-content on grid items override our attempt to create a scroll container.

Minimum content size can be said to be the css min-content keyword. MDN says the min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word. The min-content here is controlled by min-width.

If we give a div min-width: 400px and also give it width: min-content we discover that the size(width) of the div is reduced to our min-width. Let's look at the UI again.

The minimum content size, min-content keyword and the min-width property in a way describes the same thing. We can now say that by default grid items have min-width of auto, min-width of auto on a grid item basically means be as wide as your children.

There are a couple of ways to fix this overflowing grid item problem, the first and second one involves adding a fixed minimum content size.

use a min-width:0 on the grid item, this prevents the grid item from respecting the default minimum content size.
use minmax(0, 1fr) minmax(0, 1fr) not 1fr 1fr when defining grid columns. Using only 1fr for our grid columns allows our grid item to be as wide as they can if they have none overlapping content(e.g a flex layout).
add an overflow property to the grid item with a value that is not visible.

You can play around with the code pen to get a better feeling for this.

After using one of the fixes, try changing the min-width property of this selector .flex > * to width. The child items shrink now because the parent(i.e the grid item) of our flex-layout now has a limit.

This brings us to a close on this issue, thanks for reading. I'm always open to suggestions, please leave them in the comments.😊

Understanding Javascript Scope

EmmahNcodes — Sun, 29 Jan 2023 22:07:52 +0000

What is scope

Scope in javascript refers to rules that guide where variables are stored and how variable look ups(reading variables) happen. We can take scope as a container where whatever details we put in cannot be accessed outside of the container, scope helps us hide details(values) that we don't want to be globally accessible in a file.

Before ES6 the smallest unit of scope was the function scope, we could group javascript scope into global and function scope. The introduction of let and const in ES6 helped introduce a new unit of scope Block scope. Whatever variables we define in the global scope are readily available anywhere in a file, this can easily lead to mistakenly overwriting variable values and sometimes hard to debug errors.

Function scope helped introduced the concept of local scope and hiding implementation details. Variables defined in a local scope are only available within that local scope and when we try to access those variables outside of their scope container, we get a reference error if that variable does not exist in the global scope.

Scopes can be nested, local scopes nested in other local scopes and finally enclosed by the global scope. When reading or assignng values to a variable in a function, the function scope would be checked first to see if that variable exists. In the case of reading a variable value, if it exists in the scope we use that value else the JS engine checks the enclosing scope(i.e goes up by a level), we get a reference error if that variable does not exist in any of the enclosing scopes. If we are not in strict mode and we try assigning a value to a variable that does not exist in the function scope, we go up by a level until we find the variable and if we evntually get to the global scope and still can't find the variable we automatically get one created for us in the global scope, else we get reference error in strict mode.

Conclusion

I'll be writing a continuation of this article to explain block scope with more examples, this was meant to be a very short article that just helped break down javascript scope😅. please let me know if there is anything that confuses you as you read.

Things to note:
var when not used in a function automatically creates a global scope variable.
let and const hijacks scopes and forcefully creates a block scope when used in forloops or other non function blocks.

Explain X Like I'm Five

EmmahNcodes — Fri, 10 May 2019 20:05:16 +0000