显示 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 元素，它就会增长以填充弹性容器内的可用空间。

EXAMPLE HERE

还可以考虑使用自定义类名以避免更改 twitter 引导程序的默认流体容器：

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

.flex-item { flex: 1; }