为啥我不能使用“fieldset”标签作为 flex 父级的深层子级？

Posted

技术标签:

【中文标题】为啥我不能使用“fieldset”标签作为 flex 父级的深层子级？【英文标题】：Why I could not use "fieldset" tag as a deep child of a flex parent?为什么我不能使用“fieldset”标签作为 flex 父级的深层子级？ 【发布时间】：2021-12-22 11:34:15 【问题描述】：

我选择 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; 是导致此溢出的原因，但是根据this question，当我们将min-height:0; 设置为我们的flex 父级时（就像我之前所做的那样）它必须正常工作。我还阅读了this question，它说在将display:flex; 应用于fieldset 标记时存在错误。但那是过去的事了，现在浏览器对此没有问题。我也没有直接使用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>

【问题讨论】：

【参考方案1】：

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

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

关闭它，例如使用 min-inline-size: 0 或 min-width: 0 并且 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;


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 父级的深层子级？的主要内容，如果未能解决你的问题，请参考以下文章

fieldset标签

<fieldset>和<legend>标签的使用

为啥我的 <legend> 元素不能内联显示？

使用zTree展开节点后,覆盖了下一个节点

为啥我不能将交叉熵损失用于多标签？

label和fieldset标签