display:flex容器内TinyMCE编辑器未占满全宽问题

• TinyMCE初始化替换目标textarea时，除了生成可见的.tox.tox-tinymce编辑器容器、将原textarea设置为display:none隐藏外，还会在DOM同级位置插入多个辅助功能节点。这类节点通常通过视口外偏移、visibility: hidden、透明度置0的方式实现隐藏，并未设置display:none属性，因此全部会被flex容器识别为直接子项参与布局计算。你检测到的4个flex子项，就是可见编辑器容器加3个TinyMCE自动生成的隐藏辅助节点。未激活TinyMCE时容器内仅存在textarea一个子项，因此尺寸表现正常。
• 修改后的flex容器未给子项配置明确的伸缩规则，flex子项默认属性为flex: 0 1 auto，即不主动拉伸填充剩余空间、允许根据内容收缩、基础尺寸由内容本身决定。叠加IE11的flex兼容bug：未显式设置宽度的flex子项min-width默认值不符合规范，不会自动适配容器宽度，最终导致编辑器被其他隐藏子项挤占空间，宽度收缩至可用空间的1/4左右。
• 原有浮动布局场景下，TinyMCE生成的辅助节点要么脱离普通文档流，要么自身宽度为0不会挤占可见元素的布局空间，因此不会触发宽度异常。

全程仅需修改CSS，无需调整HTML结构、无需改动TinyMCE初始化配置，追加以下样式规则即可：

/* 控制编辑器容器占满父容器横向可用空间 */
div.row .tox.tox-tinymce {
  flex: 1 0 100%;
  width: 100%; /* 兼容IE11 flex宽度计算异常 */
  min-width: 0; /* 修正IE11下flex子项默认最小宽度收缩问题 */
}
/* 屏蔽TinyMCE辅助节点对flex布局的空间占用 */
div.row > :not(textarea):not(.tox) {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  overflow: hidden;
}

如果后续无需兼容IE11，可将编辑器样式简化为：

div.row .tox.tox-tinymce {
  flex: 1;
}

若后续升级TinyMCE版本后辅助节点生成规则变化，只需保证选择器能命中所有非原textarea、非编辑器容器的直接子元素，将其宽度置为0不参与空间分配即可。

内容的提问来源于stack exchange，提问作者James Cobban