偶尔调整大小破碎的细节答案

【问题标题】：Resizing Broken Sporadically with Details偶尔调整大小破碎的细节
【发布时间】：2015-12-03 19:22:39
【问题描述】：

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

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

【问题讨论】：

标签： html css google-chrome resize

【解决方案1】：

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

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

W3C 说：(Resize specification)

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

但我认为您的问题是：“原始尺寸”是多少？

当用户调整元素大小时，用户代理在元素的样式属性 DOM 中将宽度和高度属性设置为用户指定大小的 px 单位长度值，如果有的话，替换现有的属性声明, 没有 !important 如果有的话。

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

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

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

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

这里你有一个很similar stackoverflow post，但指的是<textarea>的行为。

希望对你有帮助！

【讨论】：