Bootstrap儿童元素高度100％

Question

I want a Button, with 2 elements in it, to slide the Background.

But I want both elements to center vertical and get height 100% even when the other element is bigger.

Here is the HTML

<button class="btn-cstm-slide">
    <div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
    <div class="btn-cstm-slide-text">
        <span>Just a Testtest</span>
        <br/>
        <span>Let's see</span>
    </div>
</button>

And here the CSS

    .btn-cstm-slide {
    height: 100%;
    padding: 0px;
    display: flex;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    background: #333C42;

    border: none;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
    height:100%;

    min-height:100%;
    margin: 0;
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #474f54;
    color: #fff;
}
.btn-cstm-slide-text {
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #333C42;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-cstm-slide-text * {
    position:relative;
}

.btn-cstm-slide-text:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    bottom: 0;
    left:0;
    background-color: #474f54;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
    width: 100%;
}

Demo

FIDDLE

Can you help me? :(

Answer 1

Is this what you had in mind?

https://jsfiddle.net/e07uc4kj/9/

.btn-cstm-slide {
    height: 100%;
    padding: 0px;
    display: flex;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    background: #333C42;

    border: none;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
    padding: 10px;
    min-width: 80px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    text-decoration: none;
    background: #474f54;
    color: #fff;
    vertical-align: middle;
}
.btn-cstm-slide-text {
    margin-left: 100px;
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #333C42;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-cstm-slide-text:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    bottom: 0;
    left:0;
    background-color: #474f54;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
    width: 100%;
}