让盒子的内容响应？

Question

我试图在绝对中心制作一个页面大小一半的盒子。
问题是height: auto无法识别我的按钮，因此它们不断从容器中溢出。

如何在不制作容器overflow: auto的情况下实现这一目标？ 我希望内容随盒子一起扩展。

HTML

---

<div class="splash-container">
    <div class="splash">
        <span class="splash-head"></span>
        <p class="splash-subhead">
            <span>FoxCenter</span> on kuntosali ja yrityskeskus.<br>
            Kumpaa etsit?
        </p>
        <p class="pure-g buttons">
            <a href="yrityskeskus/" class="pure-button pure-button-primary">Yrityskeskus</a>
            <a href="kuntosali/" class="pure-button pure-button-primary">Kuntosali
            </a>
        </p>
    </div>
</div>

CSS

---

a.pure-button-primary {
background: #FF0000;
border-radius: 2px;
display:inline-block;
position: relative;
margin: 0 auto;
font-size: 120%;
color: white;
height: auto;
width: auto;
transition: 0.2s ease;
clear: both;
}

    .splash-container {
    background: url('../../img/rakennus.jpg');
    background-size: cover;
    z-index: 1;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    position: fixed !important;
    -webkit-animation: fade-in 2s forwards 3s;
    -moz-animation: fade-in 2s forwards 3s;
    -o-animation: fade-in 2s forwards 3s;
    animation: fade-in 2s forwards;
}

.splash {
    /* absolute center .splash within .splash-container */
    background: rgba(255,255,255,0.6);
    width: 90%;
    display: block;
    height: auto;
    margin: 0 auto;
    position: absolute;
    clear: both;
    top: 200px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    -webkit-animation: fade-in 2s forwards 4s;
    -moz-animation: fade-in 2s forwards 4s;
    -o-animation: fade-in 2s forwards 4s;
    animation: fade-in 2s forwards 4s;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    background: url('../../kuntosali/images/fc_yrityskeskus.png') no-repeat center;
    display: block;
    max-width: 100%;
    width: auto;
    height: 50%;
    background-size: contain;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: black;
    position: relative;
    letter-spacing: 0.05em;
    opacity: 0.8;
    font-size: 120%;
}