css - 是否有另一种方法可以使列布局更好地响应？

Question

我制作了一个显示我当前状态的代码框。如果将列数更改为三，则会丢失很多信息，因为它不会滚动。

我尝试过使用网格和弹性框，但它总是从左到右而不是从上到下。

https://codesandbox.io/s/frosty-rgb-pr0h7?file=/src/App.js

标签： cssreactjsstyled-components

Answer 1

如果您添加带有溢出的overflow: auto在线代码，则该问题应该得到解决：119

const Content = styled.div`
  height: 75%;
  width: 75%;
  background: hsla(0deg, 50%, 100%, 1);
  padding: 20px 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 120;
  overflow: auto;
`;