css - 尝试将 div 放置在按钮下方，但无法将其与按钮右侧对齐

Question

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

不过，我在使用 CSS 时遇到了一些问题。这是一个示例 fiddle :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>

我应该如何处理这个问题？我正在为按钮行使用 flexbox 。

我的 React 代码会检查 someProp 是否为 true，然后显示此框。 IE。 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>