尝试将div放在按钮下方，但无法将其对齐到按钮的右侧

Question

我正在使用react，我有一排按钮，其中一个按钮应该打开一个包含点击信息的div。

我在使用css时遇到了一些麻烦。这是一个小例子：https://jsfiddle.net/4ovxw4eg/1/

和片段：

.container {
  display: flex;
  flex-direction: row;
}

.openItem {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  position: absolute;
  right: 0;
}

.test {
  position: relative;
}

<div class="container">
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button class="test">
    The Button
  </button>
</div>

<div class="openItem">
  This should be below and to the right edge of The Button
</div>

我该如何处理这个问题？我正在为一排按钮使用弹性盒。

我的反应代码会检查someProp是否为true，然后显示此框。即。 showPopup && renderPopup

Answer 1

将div移动到按钮的容器div内，并使用inline-flex和相对位置。

.container {
  display: inline-flex;
  flex-direction: row;
  position: relative;
}

.openItem {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  position: absolute;
  right: 0;
  top: 40px;
}

.test {
  position: relative;
}

<div class="container">
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button class="test">
    The Button
  </button>
  <div class="openItem">
    This should be below and to the right edge of The Button
  </div>
</div>

Answer 2

.container {
  display: inline-flex;
  flex-direction: row;
  position: relative;
}

.openItem {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  position: absolute;
  right: 0;
  bottom: 0px;
}

.test {
  position: relative;
}

<div class="container">
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button>
    some button
  </button>
  <button class="test">
    The Button
  </button>
  <div class="openItem">
    This should be below and to the right edge of The Button
  </div>
</div>