Html CSS FlexBox：大小相等的元素-Internet Explorer错误_Html_Css_Flexbox

Html CSS FlexBox：大小相等的元素-Internet Explorer错误

html css

Html CSS FlexBox：大小相等的元素-Internet Explorer错误,html,css,flexbox,Html,Css,Flexbox,我正在使用CSS FlexBox设计我的网站。（见下面的示例）在FlexBox中，“Flex:1”属性将确保容器中的所有项目都根据最宽的项目重新调整大小但是，在Internet Explorer 10/11中，除非指定项目的宽度，否则此操作不起作用。（使用弹性基础）。问题是，一旦指定了弹性基准值，它将变为静态，不再根据内容收缩或增长在IE中是否有一些不使宽度固定的解决方案谢谢示例（IE-错误、Chrome-正确行为）： .家长{ 显示器：flex；证明内容：中心； } .桌子{ 显

我正在使用CSS FlexBox设计我的网站。（见下面的示例）

在FlexBox中，“Flex:1”属性将确保容器中的所有项目都根据最宽的项目重新调整大小

但是，在Internet Explorer 10/11中，除非指定项目的宽度，否则此操作不起作用。（使用弹性基础）。问题是，一旦指定了弹性基准值，它将变为静态，不再根据内容收缩或增长

在IE中是否有一些不使宽度固定的解决方案

谢谢

示例（IE-错误、Chrome-正确行为）：


.家长{
显示器：flex；
证明内容：中心；
}
.桌子{
显示器：flex；
弯曲方向：行；
}
.元素{
弹性：1；
边框：5px纯色天蓝色；
显示器：flex；
}
第一个元素-小。
第二个元素-包含更多文本，第一个元素将相应调整大小。我们如何在IE中实现这一点？

已更新

在这种情况下，IE需要一个宽度设置，并与

flex:1 10

.parent{
显示器：flex；
证明内容：中心；
}
.桌子{
显示器：flex；
/*弹性方向：行；行是默认值，因此不需要*/
}
.元素{
弹性：1 10；/*已更改*/
宽度：100%；/*已添加*/
边框：5px纯色天蓝色；
显示器：flex；
}


第一个元素-小。
第二个元素-包含更多文本，第一个元素将相应调整大小。我们如何在IE中实现这一点？

您可以始终使用百分比弹性基础。虽然这可能不是问题所在。Flexbox将使用容器元素的宽度来确定适当的测量值，类似地，如果父元素的父元素也是flex，那么父元素的父元素也需要该值。因此，您可以简单地将宽度（比如100%）添加到您的table类中，并且它应该按照预期工作。请注意，chrome行为会做出很多假设，因为您没有指定很多约束。IE也会做出假设，使输出看起来不同。这并不能解决我的问题，因为table类在整个页面上延伸，每个元素占50%。这让我回到了同样的问题——宽度变为静态。你能详细说明一下你想要的预期行为吗？“flex”属性用于根据您提供的设置拉伸图元以适合其父图元。但是，您仍然需要为父级指定宽度约束，或者添加基于百分比的宽度，或者添加flex属性（如果适用），就像LGSon所做的那样。这并不能解决我的问题，因为table类在整个页面上延伸，每个元素占50%。这让我又回到了同样的问题——宽度变为静态。@DavidSomekh我现在用跨浏览器工作的东西更新了我的答案。希望我的答案现在能被投票/接受：）@DavidSomekh是我没有价值的答案，还是你还没看到？

<html>
<style>
.parent{

    display: flex;
    justify-content:center;
}
.table{
    display:flex;
    flex-direction:row;
}

.element{
    flex:1;
    border: 5px solid skyblue;
    display:flex;
}
</style>

<div class="parent">
    <div class="table">
        <div class="element">First element - small.</div>
        <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div>
    </div>
</div>
</div>
</html>