Css 在某些情况下，div的宽度会增加，即使我有overflow:auto

我试图创建一个具有两列（50/50宽度）的类似表格的网格，这样在每列中，每行由另外两列（50/50宽度）组成，如下所示。另外，我的目标是说，如果行中的右列需要更大的宽度，就会出现一个滚动条

这似乎在大多数情况下都有效。例如，它可以处理以下数据：

  // Array with two sub arrays, each sub array holds rows for that column.
  let items = [
    [{ value: "2", label: "1" }], 
    [
      {
        label: "test ",
        value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      }
      // {
      //   label: "test",
      //   value:
      //     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nisi feugiat arcu elementum feugiat. Sed varius eros ac convallis interdum. Quisque tincidunt mauris vitae ipsum malesuada tempus. Cras ut dui vitae tortor finibus rhoncus ut in enim. Morbi nec nibh vitae mauris pretium convallis. Curabitur sed ornare arcu. Fusce dictum, lacus eget efficitur posuere"
      // }
    ]
  ];

i、 例如，蓝色矩形正确地将屏幕一分为二，最右边的列也有一个滚动条。看

但是，如果我从上面的代码片段（文本较大的代码片段）中取消注释该项，则右侧的蓝色矩形会占用太多的宽度。为什么会这样？为什么根据我取消注释的项目会有不同的行为？

试试maxWidth：“50%”这样：

{items.map（（x，i）=>{
返回(
{x.map（（y，j）=>{
返回(
{y.label}：
{y.value}
);
})}
);
})}

问题出在css中的某个地方，事实上你用一堆不必要的循环和css使一个简单的任务变得过于复杂，这使得它更加混乱，从而更难解决问题，我写了一些代码来展示我实现这一点的方法，这更干净。希望你能从中学到一些东西：）

---

这是因为css

空白：nowrap

如果您选择容器的全宽，您可以将宽度添加到单元格中，并尝试一下，这可能会对您有所帮助。

// App.js
let items = [
    [{ value: "2", label: "1" }],
    [
        // {
        //  label: "test ",
        //  value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        // }
        {
            label: "test",
            value:
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nisi feugiat arcu elementum feugiat. Sed varius eros ac convallis interdum. Quisque tincidunt mauris vitae ipsum malesuada tempus. Cras ut dui vitae tortor finibus rhoncus ut in enim. Morbi nec nibh vitae mauris pretium convallis. Curabitur sed ornare arcu. Fusce dictum, lacus eget efficitur posuere"
        }
    ]
];
return (
    <>
        <div className="row">
            {items.map((item, i) => (
                <div className="col-6" key={i}>
                    <div className="row">
                        <div className="col-6">{item[0].label}</div>
                        <div className="col-6 scroller">{item[0].value}</div>
                    </div>
                </div>
            ))}
        </div>
    </>
);

// style.css
.row {
  display: flex;
  flex-wrap: wrap;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
  max-width: 100%;
}

.scroller {
  overflow: auto;
  white-space: nowrap;
}