How to make dynamic width in flex box row with two columns? [duplicate] - html

Question

This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I would like the second column out of the two, to shrink when needed so that the first column can take more space. How would I go about to do this with flex box? I would like to achieve dynamic width behavior and not enter any specific pixel values.
.container {
border: 1px solid black;
width: 300px;
}
.container .column {
border: 1px solid magenta;
}
/* Second column */
.container .column+column {}
/* Flex grid */
.flex {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
<div class="flex container">
<div class="row">
<div class="column">
Some very long descriptional text and some extra words here and there so to say.
</div>
<div class="column">
123£
</div>
</div>
</div>
A fiddle to fiddle around width:
https://jsfiddle.net/TheJesper/5wexr384/7/

Answer 1

This happens automatically with flex, so here is the minimum css you need to make it work:
.container {
border: 1px solid black;
width: 300px;
}
.flex {
display: flex;
width: 100%;
}
.column {
border: 1px solid magenta;
}
Then change your HTML:
<div class="container">
<div class="flex">
<div class="column">
// ...
</div>
<div class="column">
// ...
</div>
</div>
</div>
I always find this guide very useful:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/