如何将元素高度设置为100％

Question

我正在创建一个React组件。 我无法将价格元素的高度设置为容器的100％，因为我的容器没有指定高度。我需要容器能够容纳任意数量的文本，这意味着我无法设置其高度。

我尝试使用绝对位置和相对位置，但无法正常工作。

.Sluzba {
    display: flex;
    flex-direction: column;
    border: 3px solid #D9754E;
    border-radius: 5px;
}

.Price {
    text-align: center;
    color: white;
    padding: 10px;
    width: 100%;
    height: auto;
    background-color: #D9754E;
}

.Content {
    margin: 30px;
}

.Content h1 {
    font-size: 1.3em;
}


/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {
    .Sluzba {
        flex-direction: row;
        align-items: center;
    }
    .Price {
        width: 150px;
        height: 100%;
    }
}

<div class="Sluzba">
    <div class="Content">
        <h1>Heading</h1>
        <p>Content content content</p>
    </div>
    <div class="Price">20€</div>
</div>

这是它的外观。

现在我的组件看起来像这样。