嵌套在另一个 flex 容器中的 flex 容器的子级不能很好地占用宽度 [重复]答案

【问题标题】：Children of flex container nested inside another flex container not taking width well [duplicate]嵌套在另一个 flex 容器中的 flex 容器的子级不能很好地占用宽度 [重复]
【发布时间】：2021-05-19 12:13:17
【问题描述】：

我有一个弹性容器，另一个嵌套在其中。这里是demo，这里是代码：

  <div style={{ display: "flex" }}>
      <div style={{ flex: 1, border: "1px solid red" }} />
      <div style={{ display: "flex", flex: 1, border: "1px solid red" }}>
        <div style={{ flex: 1 }}>{item.label}:</div>
        <div
          style={{
            flex: 1,
            whiteSpace: "nowrap",
            overflow: "auto"
          }}
        >
          {item.value}
        </div>
      </div>
    </div>

我的目标是让第一个 div 容器的子元素占据 50/50 的宽度。另外，我想要我的第二个 flex 容器的孩子（带有红色边框的第二个 div），取宽度 50/50；如果文本很大，我还想要最后一个 div 的滚动条。

如果我将此对象用作项目：

  let item = {
    label: "test ",
    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  };

它似乎工作，看这里，红色 div 占据屏幕 50% 的宽度，并且还有滚动条。见here

但如果我将其用作项目（文本较长），现在带有红色边框的第二个 div 宽度过大：

  item = {
    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"
  };

我很感兴趣为什么会发生这种情况？什么是正确的解决方法？

_{我前段时间问过类似的问题，但我简化了这个问题以便更容易回答（我得到的答案没有解释发生了什么）。}

【问题讨论】：

只需将min-width: 0 添加到嵌套的弹性容器中。
@gmoniava，我不确定你的意思。为什么不会出现？ div 已应用 overflow: auto。

标签： html css reactjs flexbox

【解决方案1】：

最外面的元素是一个 flex 容器，这使得子元素的最小宽度等于它们的内容，感谢white-space: nowrap; 最小宽度变得很大。

两种解决方案：

从最外面的元素中删除display:flex。

<div>
  <div style="flex: 1 1 0;border: 1px solid red;">
    <div style=" display: flex; flex: 1 1 0; border: 1px solid red ">
      <div style="flex: 1;">test:</div>
      <div style="
            flex: 1  0;
            white-space: nowrap;
            overflow: auto;
         ">
        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
      </div>
    </div>
  </div>
</div>

将min-width:0 应用到它的直接子代。

<div style="display: flex;">
  <div style="flex: 1 1 0;border: 1px solid red;min-width: 0;">
    <div style=" display: flex; flex: 1 1 0; border: 1px solid red ">
      <div style="flex: 1;">test:</div>
      <div style="
            flex: 1  0;
            white-space: nowrap;
            overflow: auto;
         ">
        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
      </div>
    </div>
  </div>
</div>

【讨论】：