Question

我在https://jsfiddle.net/5phqtmeu/2/处有以下代码：

HMTL：

<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)

用户代理必须允许用户调整元素的大小，除了min-width，max-width，min-height和max-height所施加的限制之外没有其他约束。（“必须”存在风险，因为只有Firefox目前支持此，并且可能会降级为“应该”）。

但我认为您问题中的问题是：哪个是“原始尺寸”？

当用户调整元素大小时，用户代理将width和height属性设置为用户指定大小的px单位长度值，在元素的样式属性DOM中，替换现有属性声明（如果有），没有！重要，如果有的话。

我一直在尝试你的代码而且我已经意识到，实际上，在你第一次调整<main>元素的那一刻，Chrome在该标记中设置了内联样式宽度属性，并且第一个宽度将是最小宽度（“原始大小”）。

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

但是，如果您首先打开具有更宽内容的<detail>元素（容器宽度动态更改），然后调整<main>容器的大小，则将设置“原始大小”当前（更宽）的宽度，你将无法收缩容器。

此问题为already reported，似乎尚未解决。

这里有一个非常similar stackoverflow post，但引用了<textarea>行为。

希望它有所帮助！

用细节零星地调整破碎的大小

1 个答案: