chrome bug 显示 flex 宽度 100答案

【问题标题】：chrome bug display flex width 100chrome bug 显示 flex 宽度 100
【发布时间】：2016-12-28 16:07:12
【问题描述】：

我的页面有点问题。

查看：https://user.oc-static.com/upload/2016/12/24/14826126993639_14825671380969_123.png

问题是图像应该完全保持在右侧，但是当我更改浏览器的分辨率时图像会向左移动。 Chrome 和 Internet Explorer（不是 firefox）会出现问题

html {
    height: 100%;
    background: black;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
table {
    border: 0;
    padding: 0;
    margin: 0;
}
#container {
    color: white;
    display: flex;
    overflow: hidden;
    height: 100%;
}
#global {
    width: 100%;
    height: 100%
    text-align: center;
}
#table {
    width: 100%;
    height: 100%;
}
#droite {
    height: 100%;
    text-align: right;
}
#image {
    height: 100%;
    display: block;
    width: inherit;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

</head>
 
 
<body>
 
  <div id="container">
 
    <div id="global">
      <table id="table">
        <tbody>
          <tr>
            <td>d</td>
          </tr>
        </tbody>
      </table>
    </div>
 
    <div id="droite">
      <img src="//zagicien.com/test.jpg" alt="" id="image">
    </div>
 
  </div>
 
</body>
 
</html>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果您在第二个元素上添加flex: 1，在第一个元素上添加flex: 0，您应该会得到您期望的结果。

https://jsfiddle.net/wrmbh6qc/1/

html {
  height: 100%;
  background: black;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  color: white;
  display: flex;
  overflow: hidden;
  height: 100%;
}

#global {
/*  width: 100%;*/
  height: 100%;
  text-align: center;
flex: 0;
}

#table {
  width: 100%;
  height: 100%;
}

#droite {
  height: 100%;
  text-align: right;
flex: 1;
width: -webkit-fill-available;
}

#image {
  height: 100%;
  width: auto;
}

<div id="container">

  <div id="global">
    <table id="table">
      <tbody>
        <tr>
          <td>d</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="droite">
    <img src="//zagicien.com/test.jpg" alt="" id="image">
  </div>

</div>

【讨论】：

有趣，但这仍然不能解决我的问题:(
@user2699190 这个解决方案怎么不能解决你的问题？
当你调整 chrome 的窗口大小时。有时会有一些错误。无论解决方案如何，都会出现 chrome 的错误
添加 width: -webkit-fill-available; 似乎可以在 Chrome 上修复它。用它更新了答案。
解决方案：删除id为“Droite”的div，只保留图片。

【解决方案2】：

解决方案：删除id为“Droite”的div，只保留图片。

【讨论】：