CSS 弹性框和带有弹性 1 的旋转输入范围

Question

>我需要在页面左侧输入垂直缩放范围，带有 2 个按钮和标签。它必须在页面上垂直居中。除了旋转输入之外，我什么都有。一旦我旋转它，它就会弯曲不起作用，没有任何意义(例如，当我改变左偏移量时，它会对角线移动(。我可以尝试随机偏移将滑块移回，但它在所有浏览器中的工作方式并不相同。我需要将输入到绿色框中。

我所需要的只是旋转输入(最小值应该在底部(，输入应该最大适合绿色框(如flex=1(。我不想要随机的魔术宽度/高度/左/上/下/右值，因为这些永远不会起作用。我希望它真正适合绿色盒子。甚至可能吗？

#zoom_controls {
border: 1px solid red;
display: flex;
flex-direction: column;
width: 0.7cm;
position: fixed;
left: 0;
height: 8em;
top: calc(50% - 4em);
}
#zoom_controls button {
width: 0.7cm;
height: 0.7cm
}
#zoom_div {
flex: 1;
outline: 1px solid green;
display: flex;
}
#zoom {
outline: 1px solid blue;
transform: rotate(-90deg);
flex: 1;
}

<div id="zoom_controls">
<div id="zoom_label">Zoom</div>
<button>+</button>
<div id="zoom_div">
<input id="zoom" type="range" min=0 max=100 value=20>
</div>
<button>-</button>
</div>

Answer 1

像这样的东西？

#zoom_controls {
display: flex;
flex-direction: column;
width: 80px;
align-items: center;
}
#zoom {
transform: rotate(-90deg);
margin: 70px 0;
}

<p id="zoom_label">Zoom</p>
<div id="zoom_controls">
<button>+</button>
<input id="zoom" type="range" min=0 max=100 value=20>
<button>-</button>
</div>