Way to fit column to content?

[RichardJECooke]

Bulma has is-narrow CSS class to fit a column to its content, and then the other columns autosize.

It would be great if Pure could have this too. Because Bulma breaks too many other things sadly.

[magikstm]

Could you possibly share a fiddle or a small demo?

[anshul137]

Is the issue still open? I would like to take it up if that is the case.

[redonkulus]

Looks like we were looking for more information about the use case before decide to implement it or not.

[mildred]

Bootstrap has a col-auto class if I'm not mistaken. The idea is to set flex-basis: auto

edit: the col-auto class shrink the container to fit the content and col without a column size grows the content to fill the available space.

[mildred]

Example with bootstrap: https://jsfiddle.net/pgoLkz38/1/

<style>
div {
  border: 1px solid black;
}
</style>
<nav class="row">
  <div class="col-2">
    a
  </div>
  <div class="col-2">
    b
  </div>
  <div class="col">
    c
  </div>
  <div class="col-auto">
    dddd
  </div>
</nav>

[ileadu]

Could you possibly share a fiddle or a small demo?

https://bulma.io/documentation/columns/sizes/#narrow-column

.column {
   display: block;
   flex-basis: 0;
   flex-grow: 1;/* This is a point. */
   flex-shrink: 1; 
}
.column.is-narrow {
    flex: none;/* This is a point. */
    width: unset;/* This is a point. */
}