带有可扩展到按钮全高的容器的垂直按钮？

Question

我试图在div 元素内制作一个垂直按钮，但我无法让div 的高度来填充剩余的空间。 我使用变换翻转按钮，我正在使用布尔玛进行布局。以下是我的代码大纲：

.column {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
}
.button {
width: auto;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column">
<a href="#" class="button">SHOW OPTIONS</a>
</div>
</div>

不确定我能在这里做些什么来解决这个问题并使其响应？我知道我总是可以使用固定的高度，但是有什么方法可以以不同的方式做到这一点，以便它随着内容而扩展？有人可以看看，如果你有任何建议，让我知道吗？我什至不必使用转换，这似乎是一个合乎逻辑的选择。

谢谢！

Answer 1

如果出于任何原因无法使用writing-mode属性，下面是一个替代解决方案：

.column {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
}
.button {
width: auto;
}
.so55562898-outer {
display: inline-block;
}
.so55562898-inner {
transform: rotate(90deg);
padding-top: calc(100% - 36px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column">
<div class="so55562898-outer">
<div class="so55562898-inner">
<a href="#" class="button">SHOW OPTIONS</a>
</div>
</div>
</div>
</div>

请注意，此解决方案需要知道按钮的高度(在本例中为36px)。

Answer 2

我希望它对你有用

.column1 {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
display: block;
padding: 3.40rem;
}
.button {
width: auto;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column1">
<a href="#" class="button">SHOW OPTIONS</a>
</div>
</div>