Как сделать респонсивный Div элемент, который сам увеличивался в размерах?

Question

[Demigodd]

Как сделать респонсивный Div элемент, который после уменьшение экрана браузера width увеличивается с 50% до 100% ?

JS Fiddle Link

То есть нужно такое поведение элемента.
Тут Child элемент равен 50% своего Parenta.
Как сделать так что бы если с левого края постепенно уменьшить браузер, child элемент не двигался с места, как только край экрана касается левого края Child элемента, то он постепенно уменьшался в размерах что бы поместиться на экране браузера.

Comments

[Сергей delphinpro]

Условие неполное.
На каком этапе элемент должен быть 50% — 1000px, 500px или 100px?
Вот когда определитесь с этим параметром, все станет просто

.block { width: 50%; }

@media(max-width:500px) {
  .block {
    width: 250px;
    max-width:100%;
  }
}

https://jsfiddle.net/1us078x3/3/

[Demigodd]

Спасибо почти то что нужно, но есть вариант без Media ?

Answer 1

[Владимир]

https://developer.mozilla.org/ru/docs/Web/CSS/Medi...
https://medium.com/@mchisti/two-css-tricks-thatll-...
https://jsfiddle.net/1us078x3/2/

Answer 2

[leni_m]

Условно решение данной задачи сводится к такому коду:

.parent { width: x; }
.child { width: x/2; }
@media all and (max-width: x/2){
	.child { width: 100%; }
}

Знаю, что с помощью препроцессоров css можно работать с переменными, но еще не разу не использовал их, так что не подскажу как правильно написать.
Причем надо, чтобы получилось у child жесткая ширина в px(чтобы его размер не менялся с изменением размера экрана), а у parent чтобы получилась ширина не жесткая(т.е. чтобы его размер изменялся)