initial

joplin notion extension/Web Development/CSS/Tips.md

@@ -0,0 +1,73 @@
+Tips
+
+- A css question. If I have a div container whose height is unknown. 
+Inside it we have a nav section whose height we don't know too. 
+How to make sure that next block inside container takes rest of the height. 
+Normally if there is no other block above it then we can simply use height:100% but here it will overflow.
+  ```css
+	#parent {
+	 display:flex;
+	 flex-direction: column;
+	}
+	#secondBlock {
+	 flex: 1;
+	}
+
+  ```
+  To get more info about how flex-1 behaves check the following
+  ```html
+	<!DOCTYPE html>
+	<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="style.css">
+		<title>Document</title>
+	</head>
+	<body>
+		<div class="flex w-500">
+			<div class="flex col ">
+				<div class="users">Users</div>
+				<div class="reviews">Reviews</div>
+			</div>
+			<div class="flex flex-1">
+				<div class="">Notifications</div>
+			</div>
+		</div>
+	</body>
+	</html>
+```
+	
+  ```css
+	.w-500{
+		width: 500px;
+	}
+
+	.flex{
+		display: flex;
+	}
+
+	.col{
+		flex-direction: column
+	}
+
+	.flex-1{
+		flex: 1;
+	}
+```
+
+- there is sidepanel at right side which expand. it have invisible extra width so each item can expand to that when hovered but that invisible portion i dont want it to effect rest of page. and able to interact with. how do i fix it
+```css
+.parent{
+	pointer-events : none;
+}
+
+.child{
+	pointer-events : auto;
+}
+
+.child:hover{
+	...
+}
+
+```