жидкость полужидкие дивы жидкость

Question

.mid{ 
 
    margin:0 auto; 
 
    max-width:10em; 
 
    min-width:5em; 
 
    border:1px solid red; 
 
}

<div class='mid'>...</div>

Этот код создает один центрированный DIV, который будет расширяться до 10em и сжался в 5em, если окно браузера достаточно мал. Почти все, что я хочу.

Возможно ли создать три div в строке, где средний div будет вести себя точно так же, как .mid (расширяется до 10em, сокращается до 5em), причем левые и правые divs ведут себя как поля на авто: расширяются до центра .mid и сжимается до 0, если места недостаточно.

Ближайшее решение, которое я нашел, это this. Проблема только в том, что .mid не сокращается, потому что td не имеет ширины и ширины.

.cont{ 
 
    display:table; 
 
    /* table-layout:fixed; /* this prevented shrinking */ 
 
    width:100%; 
 
} 
 
.cont div{ 
 
    display:table-cell; 
 
    overflow:hidden; 
 

 
    
 
} 
 
.mid{ 
 
    width:10em; /* in table width behaves like max-width*/ 
 
    border:1px solid red; 
 
}

<div class='cont'> 
 

 
    <div>left</div> 
 
    <div class='mid'>...</div> 
 
    <div>right</div> 
 
    
 
</div>

Могу ли я что-то отсутствует, или это не возможно создать этот макет с в HTML/CSS?

Answer 1

Вы можете использовать гибкие свойства: http://jsfiddle.net/7v1m5g8d/1/

.cont { 
 
    display:flex; 
 
    width:100%; 
 
    border:1px solid blue; 
 
    text-align:center; 
 
} 
 
.cont div { 
 
    flex:1; 
 
} 
 
.cont div.mid { 
 
    /* strippes for demo */ 
 
    background:repeating-linear-gradient(to right, transparent 0, transparent 0.9em, gray 0.9em, gray 1em); 
 
    min-width:5em; 
 
    max-width:10em; 
 
    flex:auto;/* reset */ 
 
    border:1px solid red; 
 
} 
 
/* do not forget to add prefix-vendor if needed or a script as prefixfree.js :) */

<div class='cont'> 
 
    <div>left</div> 
 
    <div class='mid'>...</div> 
 
    <div>right</div> 
 
</div>