css - 在某些情况下，div 的宽度会增加，即使我有溢出 :auto

Question

我试图创建一个像网格一样的表格，有两列(50/50 宽度)，这样在每一列内，每一行又包含两列(50/50 宽度)，这里是 demo .另外，我的目标是判断一行中的右列是否需要更大的宽度才能显示滚动条。

它似乎在大多数情况下都有效。例如，它适用于此类数据:

  // 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"
      // }
    ]
  ];

也就是说，蓝色矩形正确地将屏幕一分为二，而且最右边的列有一个滚动条。参见 here .

但是如果我取消注释上面代码片段(文本较大的那个)，右边的蓝色矩形会占用太多宽度。为什么会这样？为什么根据我取消评论的元素会有不同的行为？

Answer 1

像这样尝试 maxWidth: "50%":

<div style={{ display: "flex" }}>
      {items.map((x, i) => {
        return (
          <div style={{ flex: 1, maxWidth: "50%" }} key={i}>
            {x.map((y, j) => {
              return (
                <div
                  style={{
                    display: "flex",
                    border: "1px solid blue"
                  }}
                  key={j}
                >
                  <div style={{ flex: 1, maxWidth: "50%" }}>{y.label}:</div>
                  <div
                    style={{
                      flex: 1,
                      whiteSpace: "nowrap",
                      overflow: "auto"
                    }}
                  >
                    {y.value}
                  </div>
                </div>
              );
            })}
          </div>
        );
      })}
    </div>