字段集宽度为父级的100％ [英] fieldset width 100% of parent

问题描述

我需要在字段集中有一个可滚动的div。我的问题是，字段集扩展到它的内容宽度，而不是保持与其父。

 < div class = > 
< fieldset> 
< div class =list> 
< / div> 
< / fieldset> 
< / div> 
  

http://jsfiddle.net/UziTech/tg5uk25L/

两个框应在底部都有滚动条，但顶部的一个字段集，所以它不会控制溢出。

如何获得字段集只有它的父类一样宽？

c>

$

$ b $ b

在Chrome上，它有 min-width：-webkit-min-content;

可以只设置此规则：

  .section字段集{
 min-width：0; 
} 
  

请参阅fiddle：

http://jsfiddle.net/tg5uk25L/4/

使用Firebug，Chrome Dev Tools，aso检查元素，看看 div 和字段集之间的区别元素在你的样式表！

I need to have a scrollable div inside a fieldset. My problem is that a fieldset expands to it's contents width instead of staying withing its parent.

<div class="section">
    <fieldset>
        <div class="list">
        </div>
    </fieldset>
</div>

http://jsfiddle.net/UziTech/tg5uk25L/

The two boxes should both have scrollbars on the bottom but the top one is in a fieldset so it won't control the overflow.

How do I get the fieldset to only be as wide as it's parent?

解决方案

Browsers have custom css in their default stylesheet for fieldset elements.

On Chrome it has min-width: -webkit-min-content;

You could just set this rule :

.section fieldset{
    min-width: 0;
}

See fiddle:

http://jsfiddle.net/tg5uk25L/4/

Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!

这篇关于字段集宽度为父级的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！