Children of flex container nested inside another flex container not taking width well

Question

I have one flex container, and another nested inside it. Here is demo, and here is code:

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

My goal is that children of first div container take 50/50 width. Also, I want the children of my second flex container (the 2nd div with red border), to take width 50/50; and I also want scrollbar for the last div if text is large.

If I use as item this object:

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

It seems to work, see here, red divs take 50% width of screen and also there is scrollbar. See here

But if I use this as item(with longer text), now the 2nd div with red border takes too much width:

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

I am interested why this happens? and what is right fix?

_{I asked similar question some time ago but I simplified this one to make easier to answer (answer I got there didn't explain what was happening).}

@gmoniava, I'm not sure what you mean. Why wouldn't it appear? The `div` has `overflow: auto` applied. — Michael Benjamin, Feb 16 '21 at 17:58

score 1 · Answer 1 · answered Feb 16 '21 at 16:36

The outer most element is a flex container, which makes the children have a min width equal to their content, thanks to white-space: nowrap; that min width becomes huge.

Two solutions:

Remove display:flex from the outer most element.

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

apply min-width:0 to it's direct child.

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

Children of flex container nested inside another flex container not taking width well

1 Answers1