为何canvas_container_inner宽度为0？如何使其填充父容器剩余宽度？

• inline-block元素的宽度特性：#canvas_container是inline-block类型元素，这类元素默认宽度由内部内容决定。你的#canvas_container_inner里只有被注释的canvas标签，没有实际渲染内容，所以#canvas_container宽度被压缩为0，内层设置的min-width:100%自然也跟着变成0。
• 父容器布局限制：#main_container仅设置了width:100%，但默认是块级布局，无法让子元素自动分配剩余空间。inline-block子元素只会按自身宽度排列，不会主动填充父容器的剩余区域。

修改#main_container为flex布局，调整相关子元素样式，即可轻松实现剩余宽度填充：

#main_container { 
  border: 1px solid #000; 
  width:100%; 
  height: 9em; 
  position: relative; 
  display: flex; /* 启用flex布局 */
}
#info { 
  width: 8em; /* 固定宽度 */
  border: 1px solid #F00; 
  height: 100%; 
}
#info > div:nth-child(1) { padding-bottom: 1em; }
#axis_labels { 
  border: 1px solid #F00; 
  text-align: right; 
  height: 100%; 
  white-space: nowrap; /* 防止标签换行 */
}
#axis_labels_flex { display: flex; flex-direction: column; height: 100%; }
#axis_labels_flex > div:nth-child(1) { flex: 1 1 auto; border: 1px solid #FF0; }
#canvas_container { 
  flex: 1; /* 自动填充剩余宽度 */
  border: 1px solid #F00; 
  height: 100%; 
}
#canvas_container_inner { 
  width: 100%; /* 占满父容器宽度 */
  height: 100%;
}
#canvas { width: 100%; height: 100%; }

HTML保持原有结构，取消canvas标签的注释即可看到效果：

<div id="main_container">
  <div id="info">
    <div id="title">Hello world</div>
    <div id="test_block">
      <div><code>testing</code></div>
      <div><input type="text" id="tf_test" size="6"></div>
    </div>
  </div>

  <div id="axis_labels">
    <div id="axis_labels_flex">
      <div>lbl 1</div>
      <div>label 0</div>
    </div>
  </div>

  <div id="canvas_container">
    <div id="canvas_container_inner">
      <canvas id="canvas"></canvas>
    </div>
  </div>
</div>

• 给#main_container添加display: flex，让子元素变为flex项，自动横向排列并对齐高度。
• #info保留固定宽度，#axis_labels由自身内容决定宽度，#canvas_container设置flex:1，表示占据父容器的剩余所有空间。
• 移除子元素的display: inline-block和vertical-align: top，flex布局默认会处理子元素的对齐问题，无需额外设置。

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