How can I wrap checkbox form elements in CSS?

I am working on some code that presents a form with a number of checkboxes in a particular form. I would like to get the checkboxes to wrap to a second (and third, and fourth) line, but am having trouble doing so. At the moment, the checkboxes run straight off the page in a line without wrapping. I've researched a good bit and found some situations that are similar, but none of the solutions so far have worked.

There are 10 (or more) checkboxes, but for the sake of brevity I've listed only a few of them since listing all of them wouldn't really add to the conversation:

My CSS:

.add-to-cart .attribute label {
    display: inline;
    padding-right: 35px;
}
.add-to-cart .form-checkboxes{
    max-width: 600px;
    height: 300px;
    display: inline-flex;
}

.add-to-cart .attribute .form-item .form-type-checkbox {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 90px;
    background-color: #ddd;
    padding: 20px;
    margin: 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font: bold 10px verdana, arial, 'Raleway', sans-serif;
    font-style: italic;
}

My HTML/Code:

<div class="content">
<div class="add-to-cart">
    <form class="ajax-cart-submit-form" action="/this-product" method="post" id="uc-product-add-to-cart-form-7" accept-charset="UTF-8">
    <div class="attribute attribute-7 even">
        <div class="form-item form-type-checkboxes form-item-attributes-7">
            <label for="edit-attributes-7">Extras </label>
            <div id="edit-attributes-7" class="form-checkboxes">
                <div class="form-item form-type-checkbox form-item-attributes-7-49">
                    <input type="checkbox" id="edit-attributes-7-49" name="attributes[7][49]" value="49" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-49"> Blue </label>
                </div>
                <div class="form-item form-type-checkbox form-item-attributes-7-43">
                    <input type="checkbox" id="edit-attributes-7-43" name="attributes[7][43]" value="43" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-43"> Red </label>
                </div>
                <div class="form-item form-type-checkbox form-item-attributes-7-50">
                    <input type="checkbox" id="edit-attributes-7-50" name="attributes[7][50]" value="50" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-50"> Green </label>
                </div>
            </div>
        </div>
    </div>
</div>
</div>