Why does the text go off the grid? Element UI

Question

I am using this Element UI component https://element.eleme.io/#/en-US/component/checkbox#checkbox-group

Basically to group checkbox, but the detail I have is that when using it in the grid, it leaves the div

 <el-row>
          <el-form-item>
            <el-checkbox-group v-model="packageForm.premises.secundaryClassDefinitions" :disabled="isDisabled">
              <el-row>
                <el-col 
                   class="check-element" 
                   :span="12"
                   v-for="(item, index) in primaryClassCode" :key="index">
                    <el-checkbox 
                      :label="item.value"
                      :value="item.code">
                    </el-checkbox>>                
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-form-item>  
        </el-row>

visually it looks like this:

The left side is a checkbox and the right side is the other checkbox, so as you will see the text on the left side leaves the line and goes to the other side.

What is in red is the entire div and in yellow is the that contains the text, you can see that it comes out of the box. What could I do about it? I have applied the different properties to the css of the el-checkbox__label class

width: 50%;
display:inline-block;
float:left
word-break: break-word

But they don't work.

Answer 1

You can use "display: flex" for parent and "flex: 1" for child. Like:

.parent {
  display: flex;
}

.child {
  flex: 1;
}