Html CSS Flexbox问题：为什么我的flexchildren的宽度会受到其内容的影响？

我的flexbox的两个子项都有

box flex:1

的样式。我的理解是，它们的宽度应该彼此相等（两者都占其父flexbox总宽度的50%）。但是，当内容添加到子级时，它们的宽度会发生变化（取决于内容和填充物）！为什么会发生这种情况

CSS:

HTML:

这里有很多东西（div、文本等）
还有一堆东西（div、文本等）放在这里

解决方法是将

宽度：0

添加到

.box1

元素中

请参见：

我想我自己在这里发现了：

包含文本内容的box元素子元素的首选宽度为 目前文本没有换行符，导致非常不直观 宽度和弯曲度计算→ 声明box元素子元素的宽度 不只是几句话（有没有想过为什么flexbox演示都是 “1,2,3”？）

---

请注意，对于您的情况，使用

display:table

+

table layout:fixed

：，看起来要容易得多。尽管如此，flexbox确实允许您以

display:table

无法与之竞争的方式快速更改内容。

任何宽度都可以。为了可降解性，最好将其设置为

50%

。百分比宽度不会以与绝对宽度相同的方式强制解决。（在Webkit中，chrome v27）我只想说，通过在子对象中使用

width:0

，可以

调整内容：间隔，以及
-webkit flex direction:row的组合与
-webkit flex wrap:wrap同样在父级中，我得到了非常好的、行为良好的框，这些框的间距均匀，并在长文本中打断到下一行。为了得到我的理想行为，我做了很多答案，而
width:0
帮助我解决了最后一个问题！但愿我在一小时前看到这个答案，如果你使用的是“flex direction:column”，这个问题似乎会被打破“flex basis:0”是一个更好的解决方案，但如果与“flex grow:0”结合使用（如果不使用flex basis属性，则会出现这种情况）。总体而言，flexbox似乎远不如承诺的优雅：(
.hasFlex {
   display: box;
   display: -webkit-box;
   display: -moz-box;
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;}
.box0 {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;}
.box1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;}
.box2 {
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;}
.box3 {
   -webkit-box-flex: 3;
   -moz-box-flex: 3;
   box-flex: 3;}
.container {
margin-bottom: 10px;
}

<div class="container hasFlex">
<div id="main" role="main" class="box1">
    <div class="innerBG">
      a bunch of stuff (divs, text, etc) go here
    </div>
</div>
<div id="sidebar" class="box1">
    <div class="innerBG">
       a bunch more stuff (divs, text, etc.) go here
    </div>
</div>
</div>