автоматична ширина першого з трьох стовпців за вмістом - html, css

Можливо, хтось може мені допомогти: Я отримав три колонки. Перший стовпець повинен мати максимальну ширину. Другий стовпець повинен мати ширину, яку потребує вміст. Третя ширина стовпця фіксована.

Я підготував скрипку з деяким вмістом. Щоб візуалізувати, що я хочу отримати, просто подивіться на нижній ряд у скрипці.

Якщо поглянути на перший рядок, другий стовпець повинен рухатися прямо перед правим стовпцем, а перший стовпець отримуватиме якомога ширше.

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%;
}

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>

посилання на скрипку

Відповіді:

Спробуйте це:

Примітка: У класі.third можна згадати fixed width замість min-width згідно з вашими вимогами.

Перевірте демо-версію тут

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;
}