Mouse events with overlapping flex boxes

In my React app, I have two panels, each displaying buttons and using flex to justify them. Here is a simplified HTML/SCSS equivalent of what’s going on:

<div class="bottom-panel left">
  <button>Action 1</button>
</div>
<div class="bottom-panel center">
  <button>Action 2</button>
</div>

.bottom-panel {
  position:absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  &.left {
    justify-content: start;
  }
  &.center {
    justify-content: center;
  }
}

Here is the CodePen (make sure to choose SCSS if CodePen doesn’t do so automatically).

Is there a way, preferably without JavaScript, to make both buttons clickable? I tried playing with pointer-events without success.

P.S.

1. I know that I could use a single panel, but separating them helps me separate concerns of different components in my React app and simplifies code.

2. In this particular example, one can solve the problem by giving smaller width to .left. For a general solution, I would like to keep the width at 100%.

>Solution :

You can use the pointer-events: none rule to prevent the containing div from blocking the clicks.

(Remember to add pointer-events: all to anything that should be clickable, otherwise it will inherit the none and won’t receive the click)

.bottom-panel {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  pointer-events: none;
}

.bottom-panel.left {
  justify-content: start;
}

.bottom-panel.center {
  justify-content: center;
}

button {
  pointer-events: all;
}

<div class="bottom-panel left">
  <button>Action 1</button>
</div>
<div class="bottom-panel center">
  <button>Action 2</button>
</div>