calc() not working in css for setting width?-CodePudding

I'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.

Here is my program:

@import url('https://fonts.googleapis.com/css2?family=JetBrains Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" >
        <img src="add_black_24dp.svg" alt="" id="create-icon" >
        <div id="create-text" >Create</div>
      </div>
      <div id="files" >
        <img src="description_black_24dp.svg" alt="" id="files-icon" >
        <div id="files-text" >My Files</div>
      </div>
      <div id="feed" >
        <img src="article_black_24dp.svg" alt="" id="feed-icon" >
        <div id="feed-text" >Feed</div>
      </div>
      <div id="challenges" >
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" >
        <div id="challenges-text" >Challenges</div>
      </div>
      <div id="leaderboard" >
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" >
        <div id="leaderboard-text" >Leaderboard</div>
      </div>
      <div id="notification" >
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" >
        <div id="notification-text" >Notifications</div>
      </div>
      <div id="chat" >
        <img src="message_black_24dp.svg" alt="" id="chat-icon" >
        <div id="chat-text" >Dev Chat</div>
      </div>
      <div id="settings" >
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" >
        <div id="settings-text" >Settings</div>
      </div>
      <div id="signout" >
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" >
        <div id="signout-text" >Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>

As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.

Similar question: link

I have also tried what is mentioned in the Similar question but still it doesn't work...

The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.

CodePudding user response：

On the hover you are defining a variable that only has scope within the navbar element.

To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.

@import url('https://fonts.googleapis.com/css2?family=JetBrains Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
}
#navbar:hover   #editor {
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" >
        <img src="add_black_24dp.svg" alt="" id="create-icon" >
        <div id="create-text" >Create</div>
      </div>
      <div id="files" >
        <img src="description_black_24dp.svg" alt="" id="files-icon" >
        <div id="files-text" >My Files</div>
      </div>
      <div id="feed" >
        <img src="article_black_24dp.svg" alt="" id="feed-icon" >
        <div id="feed-text" >Feed</div>
      </div>
      <div id="challenges" >
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" >
        <div id="challenges-text" >Challenges</div>
      </div>
      <div id="leaderboard" >
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" >
        <div id="leaderboard-text" >Leaderboard</div>
      </div>
      <div id="notification" >
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" >
        <div id="notification-text" >Notifications</div>
      </div>
      <div id="chat" >
        <img src="message_black_24dp.svg" alt="" id="chat-icon" >
        <div id="chat-text" >Dev Chat</div>
      </div>
      <div id="settings" >
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" >
        <div id="settings-text" >Settings</div>
      </div>
      <div id="signout" >
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" >
        <div id="signout-text" >Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>