Высота: Calc ((50%-10px)/1); не работает ⇐ CSS

[Anonymous]

Я пытаюсь спроектировать этот макет, но есть проблема, когда я хочу сделать маржинальный блок ниже красного элемента. Когда я использую свойство CALC, высота неверна, что делает розовый элемент немного ползучесть, а не на той же высоте, что и синий элемент.

Код: Выделить всё

.parent {
width: 500px;
height: 300px;
background-color: #eee;
padding: 10px;
margin: 50px auto;
overflow: hidden;
}
.child-1 {
width: calc((50% - 10px)/1);
margin-right: 10px;
height: 100%;
background-color: blueviolet;
float: left;
}
.child-2 {
width: 50%;
height: 100%;
float: right;

& .up {
width: 100%;
height: calc((50% - 10px)/1);
margin-bottom: 10px;
background-color: red;
}

& .down {
width: 100%;
height: 145px;
background-color: pink;
}
}< /code>

Я попробовал ту же функцию на ширине с теми же значениями, и это сработало, и я получил то, что хотел, но это не сработало на высоте, почему ??/p>

Подробнее здесь: https://stackoverflow.com/questions/795 ... oesnt-work