Flexbox可在Chrome中使用，但不适用于Mozilla

Question

我有这个表格显示一些内容，flexbox在Chrome中工作正常，但在Mozilla中没有。问题是，如果我将内容从表中删除它可以工作，但如果在内部则不行。调整大小时，看起来绿色div具有最小宽度（Mozilla）。

JSFiddle和代码：

＆＃13;

＆＃13;

.s_container {
  margin: auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  overflow: hidden;
  border: none;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
}
.ssm_opcion {
  overflow: hidden;
  position: inherit;
  background: yellow;
}
.ssm_opcion img {
  vertical-align: middle;
  width: auto;
  max-width: 100%;
  height: auto;
}
#text_opcion {
  width: 100%;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-flex: 1;
  -moz-box-flex: auto;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  background: green;
}
.test {
  width: 100%;
}
.ti-ar-d {
  justify-content: flex-end;
  /*-- horizontal --*/
  align-items: flex-start;
  /*--  vertical  --*/
  -webkit-justify-content: flex-end;
  /*-- horizontal --*/
  -webkit-align-items: flex-start;
  /*--  vertical  --*/
  -webkit-box-pack: end;
  /*-- horizontal --*/
  -webkit-box-align: start;
  /*--  vertical  --*/
  text-align: right;
}

＆＃13;

<table class="test">
  <tr>
    <td>
      <div class="s_container">
        <div id="text_opcion" class="ti-me-d">
          <label for="test">
            <p>Prueba</p>
          </label>
        </div>

        <div class="ssm_opcion">
          <center>
            <img src="images/opciones/mostaza.png">
          </center>
        </div>
      </div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这与flexbox无关，而是与<table>。

的使用有关

您需要添加此规则，以避免图像破坏表格布局：

.test {
    table-layout: fixed;
}

Updated fiddle