如何在水平滚动表中显示可见的垂直溢出？

Question

我正在尝试实现一个可水平滚动（使用React）的表，在每一行中都有一个下拉组件。该组件是自定义的，不使用<select>标记。我注意到在表格的底部，当我打开输入时，由于表格具有，所以选项被隐藏了overflow-x: scroll。如果我使用<select>标签，这不是问题，但是我需要重建自定义下拉列表及其所有功能。此处提供了一个演示：https : //codesandbox.io/embed/frosty-moon-pz0y3

您会注意到，除非您在表格中滚动，否则第一列不会显示选项，第二列会根据需要显示选项。我的问题是如何在维护overflow-x: scroll整个表的同时允许第一列溢出。

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

function App() {
  const options = [
    {
      value: "Volvo", label: "Volvo"
    },
    {
      value: "Saab", label: "Saab"
    },
    {
      value: "Merc", label: "Merc"
    },
    {
      value: "BMW", label: "BMW"
    }
  ];

  return (
    <div className="App">
      <div className="table-wrapper">
        <table>
          <thead>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </thead>

          <tbody>
            <tr>
              <td>
                <Select options={options} value="Volvo" className="Select"/>
              </td>
              <td>
                <select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
              </td>
              <td>ABCDEF</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}

.table-wrapper {
  max-width: 120px;
  max-height: 60px;
  border: 1px solid red;
  overflow-x: scroll;
}

.Select {
  min-width: 60px;
}

Answer 1

https://codesandbox.io/s/jovial-galileo-f05m9

查看 的第 44 行index.js。您可以使用menuPortalTargetReact Select 的 prop 将打开的菜单元素附加到文档正文或您希望位于层次结构中表格容器上方的其他元素。这样就不会受到表容器中溢出规则的影响。

https://react-select.com/advanced#portaling

https://github.com/JedWatson/react-select/issues/3263#issuecomment-445809701

这是由浏览器处理溢出规则混合的方式引起的。您可能会认为您可以简单地使用overflow-x: scroll; overflow-y: visible;- 但事实显然并非如此。如果规则是或 ，浏览器将覆盖该overflow-y规则。autooverflow-xscrollauto

https://css-tricks.com/popping-hidden-overflow/