Resizing Broken Sporadically with Details

Question

I have the following code at https://jsfiddle.net/5phqtmeu/2/:

HTML:

<main>
  <details>
    <summary>test summary 1</summary>
    <div>test detail 1</div>
    <div>test detail 2</div>
   </details>
   <details>
    <summary>test summary 2</summary>
    <div>test detail 3</div>
    <div>test detail 4</div>
    <details>
     <summary>very unnessesarily really extremelly long named test summary 3</summary>
     <div>test detail 5</div>
     <div>test detail 6</div>
    </details>
   </details>
</main>

CSS:

main {
    overflow: auto;
    white-space: nowrap;
    max-width: fit-content;
    resize: horizontal;
    height: 200px;
    border: 1px solid black;
}

The problem is that this sporadically breaks, for no apparent reason. I need to be able to shrink the element, but sometimes the resize handler just refuses to move.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

The "resize" property is a little confusing because its behavior changes a lot depending on the browser you use it.

Firefox, for example, allows you to resize it to a smaller size than the original. In the other hand, WebKit based browsers (like Chrome) only allow you to change it to a bigger size than the original.

W3C says: (Resize specification)

The user agent must allow the user to resize the element with no other constraints than what is imposed by min-width, max-width, min-height, and max-height. (The "must" is at risk since only Firefox currently supports this, and may be downgraded to a "should").

But I think the problem in your question is: which is the "original size"?

When an element is resized by the user, the user agent sets the width and height properties to px unit length values of the size indicated by the user, in the element’s style attribute DOM, replacing existing property declaration(s) if any, without !important if any.

I've been trying your code and I have realized that, indeed, in the moment you resize the <main> element for the first time, Chrome sets an inline style width attribute in that tag, and that first width will be the minimal width (the "original size").

So, when you run your page, if you first resize the <main> container and then you open a <detail> element with a wider content, you will be able to shrink the container until the first width.

But if you first open a <detail> element with a wider content (the container width is changed dynamically) and after that you resize the <main> container, then the "original size" will be set with the current (wider) width and you won't be able to shrink the container.

This issue was already reported, and it seems is not fixed yet.

Here you have a very similar stackoverflow post, but refering to a <textarea> behavior.

Hope it helps!

Resizing Broken Sporadically with Details

1 Answers1