Two divs, one at 60% and the other taking the rest

Question

I've two div, the first one take 60% and the other one is just on top of it. I want the div "Shop" taking 60% horizontally and "Gameplay" would take the rest still horizontally.

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

#main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 2px solid red;
}

#Shop {
  float: left;
  width: 60%;
  height: 100%;
  border: 2px solid green;
  overflow: hidden;
}

#Gameplay {
  border: 2px solid blue;
}

<div class="Main" id="main">
  <div class="content" id="Shop">
    <h1>Laboratoire des tests JS </h1>
  </div>
  <div class="content" id="Gameplay">
  </div>
</div>

Answer 1

Make the parent display: flex; and apply width: 60%; to #Shop. Then you can either apply flex-grow: 1 or width: 40%; to #Gameplay to give it remaining width

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

#main {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 2px solid red;
}

#Shop {
  height: 100%;
  border: 2px solid green;
  overflow: hidden;
  width: 60%;
  background-color: dodgerblue;
}

#Gameplay {
  flex-grow: 1;
  width: 40%;
  background-color: hotpink;
  border: 2px solid blue;
}

<div class="Main" id="main">
  <div class="content" id="Shop">
    <h1>Laboratoire des tests JS </h1>
  </div>
  <div class="content" id="Gameplay">
  </div>
</div>