Wychodzenie ramki dziecka poza ramkę rodzica.

Mamy oto sobie kod:

<div id="ramka_1" style="width:100%;height:100px;border:1px solid;">
     <div id="ramka_2" style="wdth:100%;height:auto;border:1px solid;">
      123
    </div>
    <div id="ramka_3" style="width:100%;height:100%;border:1px solid;">
	123
   </div>
</div>

Jak widzimy ramka_3 przybiera rozmiar ramki_1, a powinien przybierać 100% przestrzeni wolnej, a jak zrobić by tak było, tak jak chcę, by ramka_3 nie wychodziła poza rodzica! A może trzeba zastosować pewną właściwość, w takim razie jaką?

Nie wiem, czy rozumiem Twoje pytanie, więc po prostu rzuć okiem na https://jsfiddle.net/sb0wh9k7/ i napisz, czy o to Ci chodziło.

A jeśli nie, to wyjaśnij jeszcze raz w czym jest problem i co chcesz osiągnąć, jakiś rysunek/wizualizacja by też nie zaszkodziły ;)

Ramka ramka_3 wychodzi poza rodzica, a nie powinien, ja nie chcę by wychodził! Stosowanie flexboksów odbada!

wrzuć na jsfielda przykład twój kod z tym problemem, tak by było to widoczne bo to co podałeś to niewiele daje, problemów może być multum, a zgadywać nikomu się nie chce.

Oto strona z przykładem z problemem: https://jsfiddle.net/o5knvqf1/

gabus napisał(a):

Ramka ramka_3 wychodzi poza rodzica, a nie powinien, ja nie chcę by wychodził! Stosowanie flexboksów odbada!

Czy w ogóle zajrzałeś do tego, co Ci wkleiłem w poprzednim poście? Gdzie tam widzisz fleksboksa?

Tak zajrzałem, twoja poprawka nic nie daje!! Wiem, co to jest flexbox!, Ma być tak, ramka_3 ma nie wychodzić poza ramką_1, tylko ma być wewnątrz niej.

twoja poprawka nic nie daje!!

Owszem, daje - teraz ramki się układają inaczej (co widać poniżej). Prosiłem Cię o opisanie, co konkretnie chcesz osiągnąć, może jakiś rysunek albo bardziej konkretny opis, a zamiast tego to zacząłeś coś pisać o fleksboksach. I nie chodzi o to, że ja jestem nieogarnięty i nie rozumiem, bo @mr_jaro też napisał, że to co podałeś to niewiele daje, więc raczej problem jest po Twojej stronie.

gabus napisał(a):

Tak zajrzałem, twoja poprawka nic nie daje!! Wiem, co to jest flexbox!

Więcej wykrzykników! Więcej! Bo inaczej nikt nie zrozumie o co Ci chodzi!

A ja jednak mam rację, częściową, ale mam rację, ramka_3 wychodzi wyraźnie poza ramka_1, nie o 1px, ale o więcej, o rozmiar ramki ramka_2, a ja chcę, by w ramka_3, w której height:100%, a tam 100% było uwzględnione bez rozmiaru ramki ramka_2.

https://jsfiddle.net/s9ypdfa4/21/

szafran98 napisał(a):

https://jsfiddle.net/s9ypdfa4/21/

Ja też tak potrafię, zamiast 100% wstawić 80%, ale nie oto mnie chodzi, chodzi mi o jakąś właściwość załatwiającą ten problem, bo np. w ramka_2, może być dowolny tekst.

a czemu flexbox odpada? do tego powstał
bez tego masz trzy wyjścia:

1. wyliczać wielkość javascriptem
2. jeśli znasz rozmiar ramka_2 to możesz użyć calc, np: height:calc(100% - 1em - 4px)
3. jeśli masz coś do nowoczesnego flexa, to może starodawny layout na tabelkach Ci odpowiada - ewentualnie: display: table;, display: table-cell i display: table-row jeśli chcesz się oszukiwać że nie używasz tabelek

Problem częściowo naprawiłem, w tę sposób w: https://jsfiddle.net/7uzan8b9/. Ale rozmiar nie jest na całą szerokość ekranu, tylko ma rozmiar najmniejszy, a ja chcę, by był na całą szerokość ekranu, a nie tak jak wychodzi. Stosowanie jednostek bezwzględnych odpada, a "vw", też odpada.

gabus napisał(a):

Problem częściowo naprawiłem, w tę sposób w: https://jsfiddle.net/7uzan8b9/. Ale rozmiar nie jest na całą szerokość ekranu, tylko ma rozmiar najmniejszy, a ja chcę, by był na całą szerokość ekranu, a nie tak jak wychodzi. Stosowanie jednostek bezwzględnych odpada, a "vw", też odpada.

tu masz na tabelkach: https://jsfiddle.net/5cr4yx9j/
ale to najgorsze z możliwych rozwiązań. Możesz dać jakieś uzasadnienie swoich ograniczeń?

Oto mi właśnie chodziło, dzięki!