<div class="item item1">width: 100%;</div>
<div class="item item2">width: calc(200px + 300px);</div>
<div class="item item3">width: calc(30em + 100px);</div>
<div class="item item4">width: calc(70% - 100px);</div>
<div class="item item5">width: calc(20vw * 2);</div>.item1 {
width: 70%;
}
.item2 {
width: calc(200px + 300px); /* 500px */
}
.item3 {
width: calc(30em + 100px);
}
.item4 {
width: calc(70% - 100px);
}
.item5 {
width: calc(20vw * 2);
}
/* Estilos no relevantes */
.item {
font-size: 1.3em;
margin: .8em;
}
.item1 {
background-color: #0074d9;
}
.item2 {
background-color: #2ecc40;
}
.item3 {
background-color: #ffdc00;
}
.item4 {
background-color: #ff851b;
}
.item5 {
background-color: #ff4136;
}
External CSS
This Pen doesn't use any external CSS resources.