【CSS】position absoluteの要素に%指定が効かない

absoluteしているclassのbottom要素にpxで幅を指定しないと0になって文字が縦1列になります。
なぜでしょうか？

HTML
1<common-channel-info riot-style="transform: translate3d({ transX }, { transY }, 0);z-index: { z }">
2    <a href="{ link }" class="wrapper" ref="wrapper" onmouseenter="{ wrapperEnter }" onmouseleave="{ wrapperLeave }">
3        <div class="bg-wrap">
4            <img class="background" ref="background" src="{ info.bg }">
5        </div>
6        <div class="bottom">
7            <!-- テスト -->
8            <div class="info-title">{ info.title }</div>
9        </div>
10    </a>
11    <style>
12        common-channel-info {
13            width: 100vw;
14            height: calc(100vw / 2 / 16 * 9);
15        }
16
17            .wrapper {
18                position: relative;
19                width: 100vw;
20                height: calc(100vw / 2 / 16 * 9);
21                overflow: hidden;
22            }
23
24                .bg-wrap {
25                    width: 100vw;
26                    height: calc(100vw / 2 / 16 * 9);
27                    -webkit-perspective: 50;
28                    /*-ms-perspective: 100px;
29                    -o-perspective: 100px;
30                    -moz-perspective: 100px;*/
31                    perspective: 50;
32                    text-align: center;
33                    overflow: hidden;
34                }
35
36                    .background {
37                        transform: rotateX(5deg);
38                        transform-origin: 0% 100%;
39                        width: 100%;
40                        height: calc(100vw / 2 / 16 * 9);
41                        vertical-align: bottom;
42                        opacity: 0.5;
43                    }
44
45                .bottom {
46                    position: absolute;
47                    /*width: 100%;*/
48                    left: 0;
49                    bottom: 5%;
50                }
51
52                    .info-title {
53                        margin-bottom: 10px;
54                        /*width: 100px;*/
55                        color: #fff;
56                        font-size: 16px;
57                        font-weight: bold;
58                        line-height: 1;
59                    }
60
61
62
63    </style>
64</common-channel-info>