Why I could not use "fieldset" tag as a deep child of a flex parent?

I chose CSS flex to layout my page and in the code below I found something that was interesting for me. first I put the code and then I will describe my problem:

 function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <!-- <fieldset class="w-100">
                <legend class="">Test</legend> -->
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            <!-- </fieldset> -->
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>

As you can see there are "fieldset" and "legend" tags in comment. If I remove comment from them I see that the layout becomes incorrect and the left column goes to the side of right one and also text-overflow: ellipsis; in my styles does not work. I know that the white-space: nowrap; in my style-sheet is the reason of this overflow but according to this question when we set min-height:0; to our flex parent (as I did before) it must work correctly. I also read this question that says there were a bug in applying display:flex; to fieldset tag. But that is for old time and now browsers don't have problem for that. Also I did not use display:flex; to fieldset tag directly, I used that in the parent of fieldset tag. So what is the problem and why I could not use fieldset tag in my layout?

This is the situation when fieldset tag is not comment:

  function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <fieldset class="w-100">
                <legend class="">Test</legend>
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            </fieldset>
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>

Solution

The flex ancestor is irrelevant. Similar behaviour can be observed without it.

Fieldset elements are defined as expecting to have min-inline-size: min-content by default.

Turn that off e.g use min-inline-size: 0 or min-width: 0 and fieldset behaves normally

function textBoxToggle(textClass)
  {
      $(textClass).toggleClass("opened", "fast");
  }

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w-100 {
    width: 100%;
}

.dFlex {
    flex: 1 1 auto;
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    width:100%;
    min-height:100%;
    min-width: 0; /* this one right here does it!*/
}

.w-50 {
    width: 50%;
    border: 1px solid red;
    margin: 50px auto;
}

.textClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textClass.opened {
    height: auto;
    overflow: auto;
    white-space: normal;
}

p.textClass {
    padding: 15px 0;
}

fieldset {
  min-inline-size: 0;
  /* or min-width: 0; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="newStyle2.css">
</head>
<body>
    <div class="dFlex">
        <div class="w-100">
          <p class="textClass">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit delectus ullam earum quibusdam suscipit voluptatem, aliquam inventore cumque consequuntur laboriosam nesciunt doloribus tempora, labore vitae dignissimos architecto qui quo. Vel!
          </p>
        </div>
    </div>
    
        <div class="w-100 dFlex">
          <div class="w-50">
            <div class="w-100"> 
            <form action="">   
                
            <fieldset class="w-100">
                <legend class="">Test</legend>
                
                <p class="textClass" onclick="textBoxToggle(this);">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis accusantium voluptatem assumenda tenetur ullam voluptatibus quo quibusdam? Aut enim, pariatur officia sed labore repellat quae dignissimos deleniti illum est commodi?consectetur adipisicing elit. Reiciendis rem exercitationem alias!
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis rem exercitationem alias! Ducimus aspernatur quod error asperiores tenetur cumque explicabo voluptates obcaecati fugit temporibus, nobis ex dolorum nihil! Assumenda, error?
                </p> 

                    <label for="fname">First name:</label>
                    <input type="text" id="fname" name="fname"><br><br>
                    <label for="lname">Last name:</label>
                    <input type="text" id="lname" name="lname"><br><br>
                
            </fieldset>
        </form>
        </div>
            
          </div>
          <div class="w-50">
            Other content
          </div>
        </div>

  <script src="jquery-3.5.1.js"></script>
  <script src="javasc.js"></script>
      
</body>
</html>