Jak zrobić, by wysokość głównego div'a przyjmowała jak najmniejszą wartość

Mamy oto sobie kod:

<div id="w0" style="border:1px solid;height:300px;">
	<div style="display:flex;flex-direction:column;float:left;width:260px;height:100%;">
		<div style="border:1px solid;width:auto;height:20px">1</div>
		<div id="w1" style="border:1px solid;width:auto;height:100%;">2kkkkkk kkkkkkk kkkkkkkk kkkkkkkkkk kkkkkk kkkkkkkkkk kkkkkkkkkkkkkk kkkkkkkkkk kkkkkkkkk kkkkkkk kkkkkkkkkkk kkkkkkkkkkkkk kkkkkkkkkkkk</div>
	</div>
	<div style="display:flex;flex-direction:column;float:left;width:260px;height:100%;">
		<div style="border:1px solid;width:auto;height:20px">3</div>
		<div id="w2" style="border:1px solid;width:auto;height:100%;">4</div>
	</div>
</div>

Pytanie: jak zrobić, by wysokość id="w0" przyjmowała jak najmniejszą wartość i była uzależniona od wysokości najmniejszej id="w1" i id="w2"?

usunac height

Bo div bedzie sie skalowal w zalenozsci od tego co tam sie w nim znajduje

https://jsfiddle.net/hadgp0nm/

Ja chcę, by wszystkie dzieci id="w0" miały tę samą wysokość (div'y z kontenerem flex), a zawartość dzieci kontenerów flex, tzn.: ``id="w1"iid="w2"```, jest dowolna, jak to zrobić, by tak było?

https://www.google.com/search?client=firefox-b-d&channel=trow&q=css+all+children+the+same+hight+flex

https://codepen.io/imohkay/pen/gpard

Jak zastosowałem dla głównego div'a (id="w0"):

display:flex;flex-wrap:wrap;

To nadal występuje ten sam problem! Co zrobić z tym?

Jak w id="w0" wpiszę konkretną wartość, tzn., np.: height:300px;, wtedy dwa flex'y wyrównują się co do zawartości, ale z drugiej strony zawartość id="w1" i id="w2" jest dowolna, więc ta konkretna wartość nie może być, co zrobić w takim razie?

Zęby mnie rozbolały od pisania inlinowych styli, ale masz:

<div id="w0" style="border:1px solid red; display:flex;">
    <div style="border:1px solid green; display:flex;flex-direction:column; width:260px;">
        <div style="border:1px solid;  max-height:20px; flex-grow:1;">1</div>
        <div id="w1" style="border:1px solid; flex-grow:1;">2kkkkkk kkkkkkk kkkkkkkk kkkkkkkkkk kkkkkk kkkkkkkkkk kkkkkkkkkkkkkk kkkkkkkkkk kkkkkkkkk kkkkkkk kkkkkkkkkkk kkkkkkkkkkkkk kkkkkkkkkkkk</div>
    </div>
    <div style="border:1px solid green; display:flex;flex-direction:column; width:260px;">
        <div style="border:1px solid; max-height:20px; flex-grow:1;">3</div>
        <div id="w2" style="border:1px solid; flex-grow:1;">4</div>
    </div>
</div>