我陷入一个问题。我创建了一个看起来像HTML表的部分。但是我还没有使用“ table”标签。
我仅使用HTML和CSS来实现上述目标。现在的问题是我无法使其响应。我知道我可以通过简单地使用溢出属性使其响应。但是我不想滚动整个部分。我只想在该部分的右侧水平滚动。在我的示例中，我想滚动的是正确内容类。该类即left-content必须存在于其中，以便如果我滚动右侧，则必须将左侧固定在此处，用户可以看到它。
<div class="outer-wrapper">
我附加了codepen链接，以确保整个代码的可访问性。
答案 0 :(得分：0)
我不确定是否正是您要的内容，但是您可以简单地使类right-content的部分与overflow: scroll;一起滚动。如果该部分中有内容，这将有所帮助，以便您测试所需的结果。
答案 1 :(得分：0)
我认为您诚实地设置flex-basis属性的次数超出了有用的时间，这导致了您的问题。
使用flex-grow / flex-shrink允许空间占用元素或压缩元素比尝试从flex-basis更改auto来过分精确要好。值。
对于您的确切情况，这些更改应该可以解决您在狭窄屏幕上看到的一些奇怪问题...
display: flex移除.outer-wrapper flex-basis: 74%中删除.right-content，然后仅设置flex: 0 1 75% overflow-x: auto;上总是有.right-content，您不需要媒体查询flex-basis: 26%中删除.left-content，然后仅设置flex: 1 0 auto flex-basis: 20%中删除.right-content .head，然后仅设置flex: 1 这应该解决大多数“过度设计”的布局问题，然后我建议的最后一件事是在“表单元”周围添加一些填充，以便在小屏幕上文本不会直接出现自己的侧面，给了呼吸空间。但是您可能还需要在它们上设置box-sizing: border-box，以便填充将压入文本中，而不是从您设置的宽度/高度值中压出。
祝你好运。