Home/ Questions/Q 6926797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:57:54+00:00

Today I tried to resize a <div> using CSS. It works in desktop browsers

  • 0

Today I tried to resize a <div> using CSS. It works in desktop browsers like Safari, Firefox & Chrome, but it’s not working on iPad.

I want to implement resizing of <div> without using JavaScript. With the resize CSS property, the user can simply drag <div>s to resize.

According to Apple’s own documentation, resize is supported on iOS since version 1, but I can’t see how to resize the <div> on iOS.

http://jsfiddle.net/dQuX7/

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Flexbox resize</title>
    <style>
    section {
        width: 800px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
    }
    div.left, div.right {
        outline: solid 1px #ccc;
        overflow: auto;
    }
    div.left {
        width: 20%;
        resize: both;

    }
    div.right {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
    }
</style> 
<body>
    <section>
        <div class="left"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div> 
        <div class="right"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        </div>

    </section>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the resize property isn‘t supported on the iPad, then I’m afraid you’re stuck — there isn’t any other non-JavaScript way to allow the user to resize an HTML element.

    (Note that resize doesn’t work on Internet Explorer or Opera either.)

    • 0