Flex图像包装器添加空白空间

Question

我有flexbox的图像高度为100％。我不明白为什么flexbox元素中有空白。我没有使用边距或填充。

您可以看到：

Chrome调试器中的图像一切正常，高度为100％，宽度保持宽高比：

但是它有一个空白空间。 flexbox的宽度不等于图像的宽度。

我应该怎么做才能使图像宽度等于flexbox的大小？

img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px #666;
  box-shadow: 0 0 5px #666;
}

.attach {
  height: 100%;
}

.attaches {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  overflow-y: hidden;
}

.root {
  flex-grow: 1;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

<div class="root">
  <div class="attaches">
    <div class="attach"><img src="url"></div>
    <div class="attach"><img src="url"></div>
  </div>
</div>

更新1： 沙箱： https://jsfiddle.net/w50f61us/

Answer 1

  <ScrollViewer x:Name="svCanvas" Grid.Row="2" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"  MouseMove="CCanvas_OnMouseMove" PreviewMouseWheel="SvCanvas_OnPreviewMouseWheel" MouseWheel="SvCanvas_OnPreviewMouseWheel" MouseDown="SvCanvas_OnMouseDown">
            <Canvas x:Name="cMain" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch" Width="36000" Height="58000"  >
                <Canvas.RenderTransform>
                    <ScaleTransform x:Name="st"/>
                </Canvas.RenderTransform>              
            </Canvas>
        </ScrollViewer>