显示flex缩小div项目

Question

我的display flex有以下CSS：

.well-contact{
    background-color:rgba(245, 245, 245, 0.5);
    border: 0;
    box-shadow: 1px 1px 20px #f5f5f5;
}
#contact{
    background: url(../img/sketch.jpg) center center fixed;
    background-size: cover;
    min-height: 110vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
textarea{
    resize: none;
}

这是我的标记：

<section class="first-block" id="contact">
            <div class="container-fluid">
                <h1 class="text-center">Contáctame</h1>
                <div class="row">
                    <div class="col-md-8 col-centered">
                        <div class="well well-lg well-contact">
                            <div class="form-group">
                                <label for="uname" class="control-label">Nombre</label>
                                <input type="text" name="uname" id="uname" class="form-control input-lg" placeholder="nombre">
                            </div>
                            <div class="form-group">
                                <label for="uemail" class="control-label">Correo</label>
                                <input type="email" name="uemail" id="uemail" class="form-control input-lg" placeholder="correo">
                            </div>
                            <div class="form-group">
                                <label for="umessage" class="control-label">Correo</label>
                                <textarea name="umessage" id="umessage" class="form-control input-lg" rows="6" placeholder="mensaje"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

出于某种原因，当我display:flex;时，会发生以下情况：

display:flex;是否有办法缩小div？

Answer 1

只需将flex: 1;提供给.container-fluid元素，以便它可以增长以填充Flex容器中的可用空间。

<强> EXAMPLE HERE

另外考虑使用自定义类名，以避免更改twitter bootstrap的默认流体容器：

<div class="container-fluid flex-item"> ... </div>

.flex-item { flex: 1; }