18910140161

HTML-Chrome中的Flex-Grow错误?-堆栈溢出

顺晟科技

2022-10-18 13:15:17

111

如果我在增加Flex-Grow的值后减少它,Chrome将使项目变大而不是变小。

您可以在https://gb.cs.unc.edu/~GB/TMP/bug.html中看到一个示例页面。我还将包括下面的代码。

我在JSBinhttps://output.jsbin.com/puqolal/3

上添加了JavaScript来递增和递减flex-grow.

如果您在该页面上打开DevTools,并在div.choose-one上增加flex-grow的值,则按钮将增大。但当你降低价值时,它们会继续增长。似乎不可能重置回原始状态。

当然,

我正在调整JavaScript的值,而不是DevTools的值,但我正在尝试最小化所涉及的代码。

正如我在Firefox上所期望的那样。我已经报告这是一个潜在的Chrome错误,但我很想找到一个解决办法,直到他们修复它。

我在Ubuntu 20.04.3 LTS上使用ChromeVersion 93.0.4577.82 (Official Build) (64-bit)

<代码><;!文档类型HTML>;<;HTML Lang=";英文";>;<;头部>;<;元字符集=";UTF-8";/>;<;元名称=";视口";内容=";宽度=设备宽度,初始比例=1.0";/>;<;标题>;Flex错误?<;/title>;<;样式>;身体{保证金:0;填充:0;高度:100VH;宽度:100VW;}DIV.Choose-One{显示:Flex;灵活增长:1;}DIV.hstack{显示:Flex;弹性:1;高度:100%;}DIV.vstack{显示:Flex;弹性:1;宽度:100%;Flex-Direction:列;}字段集{显示:Flex;弹性:1;}按钮{弹性:1;}<;/样式>;<;/标题>;<;身体>;<;DIV类=";HSTACK";>;<;DIV类=";VSTACK";>;<;DIV类=";选择一";style=";灵活增长:1";>;<;字段集>;<;按钮>;我<;/按钮>;<;/字段设置>;<;/DIV>;<;DIV类=";选择一个";>;<;字段集>;<;按钮>;显示<;/按钮>;<;/字段设置>;<;/DIV>;<;/DIV>;<;/DIV>;<;/正文>;<;/HTML>;

顺晟科技:

添加宽度:100%;高度:100%;到字段集CSS,它按预期工作。

我仍然认为这是Chrome中的一个错误,但这是一个变通方法。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航