💈

CSSのリサイズ

2024/02/12に公開

できるけど、ドラッグしようとした瞬間にずれる。原因は不明 (Edge)。

<html>
    <body>
        <style>
            .resizable {
                border: solid #999 1px;
                resize: horizontal; /* 水平方向のリサイズを許可 */
                overflow: auto; /* リサイズのために必要 */
                min-width: 100px; /* 最小の幅を設定 */
                width: 100%; /* 初期幅を親要素に合わせる */
        
                flex: auto; /* 横並べ用 */
                margin: 0 5px;
            }
        </style>
        
        <div style="display: flex;">
            <div class="resizable">Column 1</div>
            <div class="resizable">Column 2</div>
            <div class="resizable">Column 3</div>
        </div>        
    </body>
</html>

Discussion