auto-szerokość pierwsza z trzech kolumn według zawartości - html, css

Może ktoś może mi pomóc: Mam trzy kolumny. Pierwsza kolumna powinna mieć tyle szerokości, ile jest dostępna. Druga kolumna powinna uzyskać szerokość wymaganą przez zawartość. Trzecia szerokość kolumny jest ustalona.

Przygotowałem skrzypce z pewnymi treściami. Aby wyobrazić sobie, co chcę uzyskać, spójrz na dolny rząd skrzypiec.

Przyjrzyjmy się zatem pierwszemu wierszowi, druga kolumna powinna przesunąć się prosto przed prawą kolumną, a pierwsza kolumna uzyska możliwie największą szerokość.

część css:

.wrap {
width: 100%;
}

.first {
background-color: coral;
float: left;
min-width: 33%;
}

.second {
background-color: lightblue;
float: left;
}

.third {
background-color: lightgreen;
float: right;
min-width: 25%;
}

część HTML:

<div class="wrap">
<div class="first">xxxxx</div>
<div class="second">yyyy</div>
<div class="third">zzzzzzz</div>
</div>
<br>
<br>
<br>
<div class="wrap">
<div class="first"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div class="second">yyyyyyy</div>
<div class="third ">zzzzzz</div>
</div>

link do skrzypce

Odpowiedzi:

Spróbuj tego:

Uwaga: w klasie.third możesz wspomnieć fixed width zamiast min-width jak na Twoje wymagania.

Sprawdź demo tutaj

CSS:

.wrap {
width: 100%;
display: flex;
}

.first {
background-color: coral;
flex: 1 0 0;
word-break: break-all;
}

.second {
background-color: lightblue;
}

.third {
background-color: lightgreen;
min-width: 25%;
word-break: break-all;
}