Display Flex not working on Firefox but Chrome

Question

I have a simple container containing an a tag next to a table. All I'm trying to do is to align them next to each other. On Chrome it is working, but on Firefox unfortunately not.

#fluidDescription_subContainer {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: white;
}

#fluidDescriptions_table[name="sav"] {
  font-size: 12px;
  text-align: left;
  margin-bottom: 0px;
  flex: 3;
}

#sav_fluid_extra_button {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;
  cursor: pointer;
  border-left: 2px solid #f4f4f4;
  text-decoration: none;
}

<div id="fluidDescription_subContainer" style="">
  <table name="sav" style="" id="fluidDescriptions_table" class="table">
    <tbody id="fluidDescriptions_tbody">
      <tr style="border-bottom: 1px solid #f4f4f4">
        <td id="fluidDescriptions_controlFunction">Typ 2.3</td>
      </tr>
      <tr style="border-bottom: 1px solid #f4f4f4">
        <td id="fluidDescriptions_steuerung">GAZ-7</td>
      </tr>
      <tr>
        <td>aaa</td>
      </tr>
      <tr>
        <td>bbb</td>
      </tr>
      <tr>
        <td>ccc</td>
      </tr>
    </tbody>
  </table>
  <a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">
    <b>Fluid-Plan</b>
    <i class="fa fa-file-pdf-o fa-5x"></i>
  </a>
</div>

On Mozilla Firefox it looks like the table is overlapping the a tag.

Here is the link: http://jsfiddle.net/aq9Laaew/168135/

Your table has width 100%, not in your code but it's coming from scss or something — Huangism, Aug 22 '18 at 13:36
thanks for the fast response. But I think it has nothing to do with the width of the table, which is set by bootstrap. Even though I disabled it via the webdev tool, the table is not 3/4 of the whole container — moody, Aug 22 '18 at 13:49
Well you need to override that width, if you set width to 75% then it will work — Huangism, Aug 22 '18 at 14:01
I know it will work. But I want that let "flexbox" does the work, not percentage. — moody, Aug 22 '18 at 14:21
Flex is still doing its thing, when you need to set something, you set it or you can wrap the table like the answer below — Huangism, Aug 22 '18 at 15:58

Arkellys · Accepted Answer · 2018-08-22T20:50:41.873

You can fix this by wrapping your table inside another div like this :

#fluidDescription_subContainer {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: white;
}

#tableWrapper {
  flex: 3;
}

#fluidDescriptions_table[name="sav"] {
  font-size: 12px;
  text-align: left;
  margin-bottom: 0px;
}

#sav_fluid_extra_button {
  display: flex;
  display: -moz-box;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;
  cursor: pointer;
  border-left: 2px solid #f4f4f4;
  text-decoration: none;
}

<div id="fluidDescription_subContainer" style="">
  <div id="tableWrapper">
    <table name="sav" style="" id="fluidDescriptions_table" class="table">
      <tbody id="fluidDescriptions_tbody">
        <tr style="border-bottom: 1px solid #f4f4f4">
          <td id="fluidDescriptions_controlFunction">Typ 2.3</td>
        </tr>
        <tr style="border-bottom: 1px solid #f4f4f4">
          <td id="fluidDescriptions_steuerung">GAZ-7</td>
        </tr>
        <tr>
          <td>aaa</td>
        </tr>
        <tr>
          <td>bbb</td>
        </tr>
        <tr>
          <td>ccc</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">
    <b>Fluid-Plan</b>
    <i class="fa fa-file-pdf-o fa-5x"></i>
  </a>
</div>

You might also want to read this.

Display Flex not working on Firefox but Chrome

1 Answers1