Dopasowanie wielkości dziecka do rodzica

Mamy sobie kod

<div style="border:1px solid black;height:100px;overflow:auto;">
  <table style="border:1px solid black;">
     <tr>
        <td>
            <div style="border:1px solid black;width:200px;max-height:150px;overflow:auto;">
                  hfvjhnfgjgj
                  rfghfgjhfgj
                  fgjghjghjgh
                  hfghfgjfgjg
                  rfghfghfghh
                  tghfghhhhgjn
                  ergdfghdfhdfh
                  fghfghfghg
                  fghnfvbfjhn
                  dfgdfgdfghdfh
                  ghdfhfghfhh
            </div>
       </td>
     </tr>
  </table>
</div>

Jak zrobić, by drugi overflow:auto dopasowywał się rozmiarami, tutaj wysokością, do pierwszego overflow'a w powyższym kodzie. Tzn., aby pojawił się pasek przewijania w drugim overflow, a nie w pierwszym.

Opisz dokładniej problem, bo z twojego opisu nic nie wynika. Chcesz, żeby wewnętrzny div miał wysokość jak pierwszy? Jeśli tak to po co zewnętrzny div ma overflow auto?

pierwszy overflow powinien mieć wartość hidden.

No i co masz w tej tabelce? (czy w ogóle potrzebujesz tabelki, zakładam, że tak i że masz jakieś dane tabularyczne, ale wolę się upewnić, czy nie próbujesz robić layoutu na tabelkach)

W drugim div nie pojawia się pasek przewijania, by dopasować rozmiarami do pierwszego div poprzez tabelkę, i w rezultacie tabelka ma większy rozmiar niż pierwszy div - rodzica tabeli, w tym div pasek przewijania się pojawił. Chcę by w drugim div, pasek jednak się pojawił, i by tabelka miała taki sam rozmiar co div jego rodzica. Chcę w pierwszym div, by pasek przewijania nie pojawił się.

gabus napisał(a):

W drugim div nie pojawia się pasek przewijania, by dopasować rozmiarami do pierwszego div poprzez tabelkę, i w rezultacie tabelka ma większy rozmiar niż pierwszy div - rodzica tabeli. Chcę by w drugim div, pasek jednak się pojawił, i by tabelka miała taki sam rozmiar co div jego rodzica. Chcę w pierwszym diiv, by pasek przewijania nie pojawił się.

Może coś takiego?
https://codepen.io/zerakot/pen/YzaQOLz

Gouda105 napisał(a):

gabus napisał(a):

W drugim div nie pojawia się pasek przewijania, by dopasować rozmiarami do pierwszego div poprzez tabelkę, i w rezultacie tabelka ma większy rozmiar niż pierwszy div - rodzica tabeli. Chcę by w drugim div, pasek jednak się pojawił, i by tabelka miała taki sam rozmiar co div jego rodzica. Chcę w pierwszym diiv, by pasek przewijania nie pojawił się.

Może coś takiego?
https://codepen.io/zerakot/pen/YzaQOLz

Ale tam wysokość rodzica tabelki jest mniejsza niż sama tabelka, czyli nie pasuje mi to.

gabus napisał(a):

Gouda105 napisał(a):

gabus napisał(a):

W drugim div nie pojawia się pasek przewijania, by dopasować rozmiarami do pierwszego div poprzez tabelkę, i w rezultacie tabelka ma większy rozmiar niż pierwszy div - rodzica tabeli. Chcę by w drugim div, pasek jednak się pojawił, i by tabelka miała taki sam rozmiar co div jego rodzica. Chcę w pierwszym diiv, by pasek przewijania nie pojawił się.

Może coś takiego?
https://codepen.io/zerakot/pen/YzaQOLz

Ale tam wysokość rodzica tabelki jest mniejsza niż sama tabelka, czyli nie pasuje mi to.

Rozwiązałem problem, oto resultat:

<div class="container">
  <table>
     <tr>
       <td>
            <div>
                  hfvjhnfgjgj
                  rfghfgjhfgj
                  fgjghjghjgh
                  hfghfgjfgjg
                  rfghfghfghh
                  tghfghhhhgjn
                  ergdfghdfhdfh
                  fghfghfghg
                  fghnfvbfjhn
                  dfgdfgdfghdfh
                  ghdfhfghfhh
            </div>
       </td>
     </tr>
  </table>
</div>

.container{
  display:flex;
  flex-direction:row;
  height:100px;
  width:100px;
  border:1px solid black;
  display:flex;
  
}
.container table,
.container tr,
.container td,
.container div{
 display:flex;
 border-collapse: collapse;
 padding:0;
 border-spacing:0;
 max-height:200px;
 height:100%;
 width:100px;
 border:1px solid black;
}
.container div{
  overflow:auto;
}