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

【问题标题】：Is there another way of making a column layout better for responsiveness?是否有另一种方法可以使列布局更好地响应？
【发布时间】：2021-04-19 11:28:23
【问题描述】：

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

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

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

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

如果您在119 线上添加overflow: auto，问题应该会得到解决

你的代码有溢出：

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;
`;

【讨论】：