html - 显示伸缩收缩div元素

我的显示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吗？

最佳答案

只需将flex: 1;赋予.container-fluid元素，以便其增长以填充flex容器中的可用空间。

EXAMPLE HERE

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

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

.flex-item { flex: 1; }

关于html - 显示伸缩收缩div元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25610421/