Why are my elements not equal in width?

Question

I'm trying to have the widths equal to each other automagically so this way I can have any number of elements and variable text. In this case, the elements are not consistent in size. Any ideas?

Js Fiddle

HTML:

<div class="tempTable">
    <a href="a"  class="childThing" >A</a>
    <a href="b" class="childThing ">sdfdssdfsdfdsfdsfdsffsdfsdfsdf </a>
    <a href="c"  class="childThing" >sdfsdf</a>
    <a href="d"   class="childThing" >sdfdsf</a>
</div>  

CSS:

.tempTable {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    max-width: 1000px;
}

.childThing {
   -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    text-align: center;
    display: block;
    color: #fff ;
    background-color: #4C839D;
    font-size:15px;
    border:none;
    position: relative;
    outline:0;
}

Answer 1

You can have a css like this:

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

Here is a working version: http://jsfiddle.net/g4dGz/1028/

Answer 2

try:

.tempTable {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: 1000px;
}
.childThing {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  text-align: center;
  color: #fff ;
  background-color: #4C839D;
  font-size: 15px;
  border: none;
  outline: 0;
}

demo: http://codepen.io/anon/pen/GJNxXZ

See also: CSS3 Flexbox: display: box vs. flexbox vs. flex

Answer 3

The block value for the display property makes the box of an element break a line and take the full width of its container. This is the default value of the p and div elements.

Instead, use the display property to make your elements act like table elements, since the size of their boxes is bound together.

HTML:

<div class="table">
    <a href="a">A</a>
    <a href="b">Lorem ipsum sit amet</a>
    <a href="c">C</a>
    <a href="d">D</a>
</div>

CSS:

.table a {
    display: table-row;
}

Fiddle

Answer 4

...widths equal to each other automagically

if you set a flex-basis property it will fix a width;
if needed, word-wrap: break-word will wrap text.

Check the fiddle