Elementy ze zmienną szerokością

Question

Cześć!

Przychodzę tutaj ponieważ mam problem z szerokością elementów na mojej stronie. Mam na niej elementy ".els" a w nich są dwa elementy ".number" i input ".things"

<div class="els" id="n1" style="background:#00bfff"><div class="number">1</div><input type="text" class="things"><div class="clear"></div></div>

Szerokość ".number" jest stała, natomiast input ".things" powinien być rozciągnięty na pozostałą część wolnej przestrzeni. Chciałbym aby zarówno ".things" razem z ".els" płynnie dostosowywały swoją szerokość do ekranu na którym są wyświetlane (chcę żeby były responsywne )

Roboczo w jsfiddle dałem dla ".els" i ".things" stałe width.

https://jsfiddle.net/bugs55/k9gsd6b5/11/

Bardzo proszę o pomoc!

Pozdrawiam,
Konrad

 

Answer 1

Myślę, że mozna by to zrobić mniej więcej tak:

W klasie .els width zamienić na wartość procentową np 50%

W klasie .els dla inputa width ze stałej wartości zamienić na:

width: calc(100% - 50px);

50px wzieło się stąd że masz: padding z .els 10px + margin-right 10px z .els .number + margin-left 5px z .els number + width 25px z .els .number

Comments

Sprawdzałem z calc(), nie o to mi chodziło. Poradziłem sobie z problemem szerokości inputa, użyłem flexa. Jednak chcę żeby elementy .els zmieniały swoją szerokość dopiero po przekroczeniu 430px (400px + margines 30px). Niestety kiedy testuję stronę w trybie responsywnym w przeglądarce to inne elementy zmieniają swoją szerokość, a te zostają cały czas z tą samą... 

https://jsfiddle.net/bugs55/qtdLxv5o/15/