fieldset 在 angularjs-material 中破坏了我的 flex 布局
fieldset breaks my flex layout in angularjs-material
我的问题最好通过查看两个代码示例来说明：
第一个在省略 fieldset
时工作正常
第二个例子表明，当fieldset处于活动状态时，长文本会将布局移出window。 （在整页视图中）
当您缩短文本时，它会起作用并且符合 flex 布局。
现在我的问题是，当我在我目前正在处理的布局中遗漏 fieldset 时，它对 chrome 和 firefox 非常有效，但在 IE11 中失败。当我插入 fieldset 时，布局在所有浏览器下看起来都很好，但是当在文本字段中输入长文本时会出现上述问题，不幸的是这个文本字段用于 posting link，所以假设文本很容易变得很长。
我找到了一个 post，显示了我的页面在省略 fieldset 时的大致外观。
https://github.com/angular/material/issues/5084
这是两个片段：
工作的：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<!-- <fieldset> -->
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
<!-- </fieldset> -->
</body>
和启用了 fieldset 的不工作的：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<fieldset>
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
</fieldset>
</body>
问题
是否可能，如果可以，我如何使布局与 fieldset 一起使用？
将 min-inline-size: auto 添加到 fieldset 以 修复 宽度 - fieldset 具有由 min-inline-size: min-content 设置的计算样式浏览器用户代理。对于不支持此 属性 的用户代理，您不会遇到此 问题 。
参见下面的演示：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<fieldset style="min-inline-size: auto">
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
</fieldset>
</body>
我的问题最好通过查看两个代码示例来说明：
第一个在省略 fieldset
第二个例子表明，当fieldset处于活动状态时，长文本会将布局移出window。 （在整页视图中）
当您缩短文本时，它会起作用并且符合 flex 布局。
现在我的问题是，当我在我目前正在处理的布局中遗漏 fieldset 时，它对 chrome 和 firefox 非常有效，但在 IE11 中失败。当我插入 fieldset 时，布局在所有浏览器下看起来都很好，但是当在文本字段中输入长文本时会出现上述问题，不幸的是这个文本字段用于 posting link，所以假设文本很容易变得很长。
我找到了一个 post，显示了我的页面在省略 fieldset 时的大致外观。
https://github.com/angular/material/issues/5084
这是两个片段： 工作的：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<!-- <fieldset> -->
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
<!-- </fieldset> -->
</body>
和启用了 fieldset 的不工作的：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<fieldset>
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
</fieldset>
</body>
问题
是否可能，如果可以，我如何使布局与 fieldset 一起使用？
将 min-inline-size: auto 添加到 fieldset 以 修复 宽度 - fieldset 具有由 min-inline-size: min-content 设置的计算样式浏览器用户代理。对于不支持此 属性 的用户代理，您不会遇到此 问题 。
参见下面的演示：
angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body ng-app="MyApp">
<fieldset style="min-inline-size: auto">
<div style="display: flex; margin: 1em">
<div flex="100" layout="row">
<!-- main information field -->
<div flex='90'>
<div layout='row' flex='100'>
<div layout="column" flex="50" >
<label>Externe notities</label>
<md-content>
<div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
</div>
</md-content>
</div>
<div layout="column" flex="50">
<label>Interne notities</label>
<md-content>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</div>
</md-content>
</div>
</div>
</div>
<!-- stop light -->
<div flex='10'>
<img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
</div>
</div>
</div>
</fieldset>
</body>