Question: Hi can you help me to set columns in my code? I have this code:

```
<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">side menu</div>
        <div class="???">
            <div>1 piece</div>
            <div>2 pieces piece</div>
            <div>1 piece</div>
        <div/>
    <div/>
<div/>

```

here is my actual result, where I've draw how I need split rest of space. Blue column with menu should have fixed with, what actually do. Columns in ratio 1:2:1 could be adjustable.

[![enter image description here](https://i.stack.imgur.com/o9ydY.png)](https://i.stack.imgur.com/o9ydY.png)

Answer: 
With Bootstrap v4 Flexbox:

```
<div class="d-flex flex-row h-100">
    <div class="d-flex justify-content-start">side menu</div>
    <div class="d-flex flex-row w-100">
        <div class="w-25">1 piece</div>
        <div class="w-50">2 pieces piece</div>
        <div class="w-25">1 piece</div>
    </div>
</div>

```
It seems that you can achieve this without the flex-column.

The column ratio is decided by the flex-grow-1 class depending on the amount of space available/needed.

```html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div style="height: 175px;">

  <div class="d-flex flex-grow-1 border border-primary m-1 h-100">

    <div class="d-flex flex-grow-1 border border-secondary m-1">

      <div class="border border-success m-1">
        <!-- seems to work even without flex-column :D -->
        <div class="border border-warning m-1">1 piece</div>
        <div class="border border-info m-1">1 piece</div>
        <div class="border border-dark m-1">1 piece</div>

      </div>
      <!-- with flex-wrap they will go under eachother if there is not enough space -->
      <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1">

        <div class="flex-grow-1 border border-warning m-1">1 piece</div>
        <div class="flex-grow-1 border border-info m-1">2 pieces piece</div>
        <div class="flex-grow-1 border border-dark m-1">1 piece</div>

      <div/>

    <div/>

  <div/>

<div>
```