我怎样才能在水平滚动 table 中看到可见的垂直溢出？

Question

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

您会注意到，除非您在 table 中滚动，否则第一列不会显示选项，而第二列会根据需要显示选项。我的问题是如何在 table 作为一个整体保持 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

查看 index.js 的第 44 行。您可以使用 React Select 的 menuPortalTarget 属性将打开的菜单元素附加到文档主体或您希望位于层次结构中 table 容器之上的其他元素。这样就不会受到table容器中溢出规则的影响。

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

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

这是浏览器处理溢出规则混合的方式造成的。你会认为你可以简单地使用 overflow-x: scroll; overflow-y: visible; - 但显然不是这样。如果 overflow-x 规则是 scroll 或 auto.

，浏览器会将 overflow-y 规则覆盖为 auto

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

我怎样才能在水平滚动 table 中看到可见的垂直溢出？

How can I have visible vertical overflow in a horizontally scrollable table?

html

javascript

css

reactjs

react-select