How to make dynamic width in flex box row with two columns?

Question

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/

score 3 · Accepted Answer · answered Apr 03 '20 at 05:36

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/

How to make dynamic width in flex box row with two columns?

1 Answers1