为什么我不能使用 "fieldset" 标签作为 flex 父标签的深层子标签？

Question

我选择了 CSS flex 来布局我的页面，在下面的代码中我发现了一些我感兴趣的东西。首先我放上代码，然后我会描述我的问题：

 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>

如您所见，评论中有“fieldset”和“legend”标签。如果我 从他们那里删除 评论，我会看到布局变得不正确，左栏转到右栏的一侧，而且我的样式中的 text-overflow: ellipsis; 也不起作用。我知道我的风格中的 white-space: nowrap;-sheet 是溢出的原因，但根据 when we set min-height:0; to our flex parent (as I did before) it must work correctly. I also read 说在将 display:flex; 应用于 [=21= 时存在错误] 标签。但那是过去的事了，现在浏览器对此没有问题。我也没有直接使用 display:flex; 到 fieldset 标签，我在 fieldset 标签的父标签中使用了它。那么问题是什么，为什么我不能在我的布局中使用 fieldset 标签？

这是fieldset标签没有注释时的情况：

  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>

Answer 1

flex 祖先无关紧要。没有它也可以观察到类似的行为。

字段集元素被定义为默认具有 min-inline-size: min-content。

关闭它，例如使用 min-inline-size: 0 或 min-width: 0 并且字段集表现正常

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>

为什么我不能使用 "fieldset" 标签作为 flex 父标签的深层子标签？

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

html

css

layout

flexbox