How Can Div Elements Take Only The Space Of Their Inner Content In A Css3 Flexbox?

I have the following HTML structure:

Speichern

Style

Solution 1:

I dont think this is possible to do in css3 flexbox (yet). But you could so something like this?

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

z-index: 10;

Since you always want the middle text centered regardless of the content of the table, I have removed it from the table and positioned it over the top with a higher z-index. It works in all browsers apart from safari (due to the lack of flex support).

If you want something working in all browsers, I would just use display: table;

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

The downside to floating the title is that the other cells could overlap it if they are long enough. To fix this you could use the central cell for the title and auto calculate it's padding using javascript, but then it gets a bit messy.

Solution 2:

Here's another, maybe easier, way to achieve it

.bar {
  background: yellow;
  line-height: 30px;
  position: relative;
  text-align: center;
  width: 300px;}
  .bar:before, .bar:after {
    padding: 010px;
    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;
  }

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

Share