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

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.

    #parent {
     display:flex;
     flex-direction: column;
    }
    #secondBlock {
     flex: 1;
    }
  
  

  To get more info about how flex-1 behaves check the following

    <!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

.parent{
	pointer-events : none;
}

.child{
	pointer-events : auto;
}

.child:hover{
	...
}