div元素如何在CSS3 Flexbox中仅占用其内部空间的空间？

Question

我有以下HTML结构：

<div class="indicator"></div> 
<div class="mainPanel"> 
    <div>Speichern</div> 
    <div>Style</div> 
    <div>Speichern</div> 
</div> 

mainPanel中包含三个元素。中间的元素应该始终处于中心如下所示：

这里是CSS代码我用

.indicator { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    position: absolute; 
    width: 150px; 
    height: 50px; 
    border-right: 1px solid red; 
    z-index: -10; 
} 
.mainPanel { 
    width: 300px; 
    height: 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: justify; 
    -ms-flex-pack: justify; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 
.mainPanel > div { 
    padding: 0 10px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    flex: 1 1 25%; 
    border: solid 1px #999; 
} 
.mainPanel > div:nth-child(1) { 
    background: red; 
    display: inline-block; 
} 

.mainPanel > div:nth-child(3) { 
    background: lime; 
} 

.mainPanel > div:nth-child(2) { 
    flex: 900 0 auto; 

    background: yellow; 
    text-align: center; 
} 

我想，在中心的内容不能生长在左和右部分。

我怎样才能让左边和右边的元素的宽度至多是其内容的大小？我怎样才能实现左右元素的宽度不能小于其内容？

这是应该的样子：

Answer 1

我不认为这是可能的CSS3 Flexbox的（还）这样做。但你可以这样吗？

http://jsfiddle.net/fggxq753/1/

z-index: 10; 

因为你总是希望不管表的内容为中心的中部文字，我已经从表中删除，并放置在它具有较高的z-index顶部。它可以在除Safari之外的所有浏览器中使用（由于缺少灵活支持）。

如果你想在所有浏览器中都能正常工作，我只需要使用display：table;

http://jsfiddle.net/fggxq753/2/

缺点浮动标题是其他细胞可以重叠，如果他们足够长。为了解决这个问题，你可以使用标题的中央单元格，并使用javascript自动计算它的填充，但是会变得有点麻烦。

Answer 2

下面是另一个，也许更容易，方法去实现它

.bar { 
 
    background: yellow; 
 
    line-height: 30px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 300px;} 
 
    .bar:before, .bar:after { 
 
    padding: 0 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    } 
 
    .bar:before { 
 
    background-color: red; 
 
    content: attr(data-left); 
 
    left: 0; 
 
    } 
 
    .bar:after { 
 
    background-color: lime; 
 
    content: attr(data-right); 
 
    right: 0; 
 
    }

<div class="bar" data-left="L" data-right="Speichern">Style</div>