Flexbox работает только в chrome

Question

Я пытаюсь достичь двух столбцов div, где один фиксирован, а другой растянут для заполнения. Для этого я в настоящее время использовал flexbox, однако я узнал, что он не работает в сафари и IE 10. Так как же я могу достичь такого же результата без flexbox?

http://jsfiddle.net/LLExL/4086/

.stat-result { 
 
    border: 1px solid #ddd; 
 
    width: 100%; 
 
    display: flex; 
 
    margin-bottom: 20px !important; 
 
} 
 

 
.stat-result .stat-meta { 
 
    float: left; 
 
    width: 100%; 
 
    min-height: 40px; 
 
    border-right: 1px solid #ddd; 
 
} 
 

 
.stat-result .result-meta { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.stat-result .result-meta i { 
 
font-size: 50px; 
 
line-height: 80px; 
 
} 
 

 
.stat-result .stat-meta .stat-row { 
 
    width: 100%; 
 
    height: 50%; 
 
    border-bottom: 1px solid #ddd; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.stat-result .stat-meta .stat-row span { 
 
    line-height: 40px; 
 
    font-weight: 700; 
 
    font-family: Oswald; 
 
    text-transform: uppercase; 
 
    
 
} 
 
.stat-result .stat-meta .stat-row1 { 
 
    width: 100%; 
 
    height: 50%; 
 
     padding-left: 10px; 
 
    padding-right: 10px; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.stat-result .stat-meta .stat-row1 span { 
 
    line-height: 40px; 
 
}

<div class="stat-result"> 
 
<div class="stat-meta"> 
 
<div class="stat-row"> 
 
<span><a href=" http://www.ggwp.dk/titan-vs-mousesports/ ">Titan Vs. Mousesports</a></span> 
 
    </div> 
 
    <div class="stat-row1"> 
 
     <span>1.35</span> 
 
     <span style="float: right;">Test</span> 
 
    </div> 
 
</div> 
 
<div class="result-meta"> 
 
    <i class="fa fa-check-circle"></i> 
 
    </div> 
 
</div>

Answer 1

Вы отсутствуют все Flexbox префиксов. Согласно caniuse, вы можете использовать flexbox для сафари и IE10.

Обновлено Fiddle http://jsfiddle.net/LLExL/4088/

И CSS

.stat-result { 
    border: 1px solid #ddd; 
    width: 100%; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    margin-bottom: 20px !important; 
} 

Edit: Я хотел бы рекомендовать использование Глоток/хрюкать и autoprefixer автоматически префикс вашего CSS.

Answer 2

Если вы не хотите использовать flexbox, вы можете использовать свойство table-cell для достижения того же.

.stat-result { 
border: 1px solid #ddd; 
width: 100%; 
display: table; 
margin-bottom: 20px !important; 
} 

.stat-result .stat-meta { 
display:table-cell; 
width:calc(100% - 100px); 
min-height: 40px; 
border-right: 1px solid #ddd; 
} 

.stat-result .result-meta { 
display: table-cell; 
width: 100px; 
height: 100%; 
text-align: center; 
} 

FIDDLE DEMO