如何为元素的某个子元素禁用<a>标签链接?

假设我有一个容器,当我单击它时,该容器会指向另一个页面。但是,我希望禁用此容器中的某些元素,因此当我单击它们时,该链接将不起作用。我怎么做? 例如,在这里我要禁用容器的红色面。

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<a href="#">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>