CODEWITHSUNDEEP
htmlcss
Peter Pik
Peter Pik

Reputation: 11193

Flexbox only working in chrome

i'm trying to achieve a two column div where the one is fixed and the other one is stretched to fill rest. For this i've at the moment used a flexbox, however i've found out that it does not work in safari and IE 10. So how can i achieve the same result without 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>

Upvotes: 0

Views: 48

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

If you don't want to use flexbox, you can use table-cell property to achieve the same.

.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

Upvotes: 0

donnywals
donnywals

Reputation: 7601

You are lacking all the flexbox prefixes. According to caniuse you can actually use flexbox for safari and IE10.

Updated Fiddle http://jsfiddle.net/LLExL/4088/

And 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: I'd like to recommend using gulp/grunt and an autoprefixer to automatically prefix your css.

Upvotes: 1

Related Questions