调整大小偶尔会出现细节问题

Question

我在 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;
}

问题是这偶尔会中断，原因不明。我需要能够缩小元素，但有时调整大小处理程序只是拒绝移动。

Answer 1

"resize" 属性有点令人困惑，因为它的行为会根据您使用的浏览器发生很大变化。

例如，Firefox 允许您将其调整为比原始尺寸更小的尺寸。另一方面，基于 WebKit 的浏览器（如 Chrome）只允许您将其更改为比原始尺寸更大的尺寸。

W3C 说：(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").

但我认为你问题中的问题是：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.

我一直在尝试你的代码，我意识到，事实上，在你第一次调整 <main> 元素大小时，Chrome 设置了一个内联样式宽度属性标签，第一个宽度将是最小宽度（"original size"）。

因此，当您运行页面时，如果您先调整 <main> 容器的大小，然后打开内容更宽的 <detail> 元素，您将能够缩小容器直到第一个宽度。

但是如果你首先打开一个内容更宽的 <detail> 元素（容器宽度是动态改变的）然后你调整 <main> 容器的大小，那么 "original size" 将设置为当前（更宽）的宽度，您将无法缩小容器。

这个问题是 already reported，似乎还没有解决。

这里你有一个非常similar Whosebug post，但指的是一个<textarea>行为。

希望对您有所帮助！

调整大小偶尔会出现细节问题

Resizing Broken Sporadically with Details

html

css

resize

google-chrome