Flexbox align-items not working on table element in Firefox

Question

In my HTML document, I have an article tag, and it has the following style:

width: 100%;
display: flex;
flex-direction: column
align-items: center;

And all of its children have:

width: 600px;
margin-top: 1em;

However, table children have this style:

width: auto;
min-width: 600px;
max-width: 100%;
border-collapse: collapse;
margin-top: 3em;

My intention is to make all children be on top of each other, behaving like a regular article style, but some tags like table and img should have adjustable widths, because their content may vary a lot.

However, in Firefox, the table tags does not center. Instead, they are aligned to the left.

I've tried applying align-self: center, and it did not work. The browser's default style is align-self: auto, so it's not a problem.

I fear it's related to the default display: table all tables have. I've tried to change it to display: block, but it behaved weirdly, probably because it lost its table properties.

I've written my code in CodePen.

body {
  font-family: Georgia;
  font-size: 14px;
  line-height: 1.618;
  background-color: #f2f2f2;
}

article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

article>* {
  width: 600px;
  margin-top: 1em;
}

article table {
  width: auto;
  min-width: 600px;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 3em;
}

article table+* {
  margin-top: 3em;
}

article table caption {
  width: 100%;
  text-align: center;
  caption-side: bottom;
}

article table thead {
  border-bottom: 1px solid black;
}

article table tbody {
  border-bottom: 1px solid black;
}

article table tbody td,
article table tbody th {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid black;
}

article table td,
article table th {
  padding-left: 0.6em;
  padding-right: 0.6em;
}

article table th {
  text-align: left;
}

<article>
  <h1>h1 title here</h1>
  <p>This text is an article tag. Its width is 100%, and it has the following style: </p>
  <ul>
    <li>display: flex</li>
    <li>flex-direction: column</li>
    <li>align-items: center</li>
  </ul>
  <p>All of its children have a fixed width, but the table, which only have a <i>min-width</i> and <i>width: auto.</i></p>
  <p>The <i>align-items: center</i> applied to the article tag should make all the elements centered. However, in Firefox, the table aligns to the left.</p>


  <table>
    <caption>table caption here.</caption>
    <thead>
      <tr>
        <th>Lorem ipsum dolor sit.</th>
        <th>Lorem ipsum dolor sit.</th>
        <th>Lorem ipsum dolor sit.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
    </tbody>
  </table>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa recusandae temporibus distinctio explicabo vero amet repellat et, eligendi commodi laudantium veniam consequuntur doloremque deleniti corporis voluptates dolorum similique tempore, omnis
    corrupti fugit. Voluptas autem dicta dolorum quidem aliquam ab, iusto rerum facilis! Minus repellat iste officia dicta totam harum magnam?</p>


  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis labore non ipsum error exercitationem repellendus eos eaque culpa fuga! Quis unde impedit neque, reprehenderit sed commodi, explicabo et eaque illo, est porro at dignissimos in sequi?
    Sunt voluptas ratione, quisquam, beatae explicabo ullam amet maiores eligendi aliquid assumenda ab minima?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem asperiores tenetur, recusandae quaerat, blanditiis incidunt enim odio veritatis et praesentium maiores a sequi ipsam cum officia cumque odit, ipsum expedita assumenda. Excepturi, natus
    fuga. Odit, cupiditate fugit? Et laborum eos tempore sed quidem, debitis, minus nisi consectetur a, expedita quaerat!</p>

</article>

score 2 · Answer 1 · answered Jul 13 '17 at 15:12

2

Set margin-left and margin-right to auto on the table also also remove the 100% width from the captions.

table{
    width: auto;
    min-width: 600px;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    & + *{
        margin-top: 3em;
    }

    caption{
        text-align: center;
        caption-side: bottom;
    }

https://codepen.io/anon/pen/weNxGZ

answered Jul 13 '17 at 15:12

abney317

7,760
6
32
56

1

Fantastic! Removing the `width: 100%` of the `caption` tag was enough here, but I'll change the `table` margins as well, just to make sure. Thank you. – VictorGodoi Jul 13 '17 at 15:30
Ah yes, the auto margins don't seem to be needed at all in this case – abney317 Jul 13 '17 at 15:33

Michael Benjamin · Answer 2 · 2017-07-14T12:40:24.723

I fear it's related to the default display: table all tables have. I've tried to change it to display: block, but it behaved weirdly, probably because it lost its table properties.

I think you may be correct here. It has something to do with inherent table properties.

If so, the simple solution is to wrap your table in a div. Make the div the child of the flex container.

Otherwise, add left and right auto margins to the table itself.

It's important to keep in mind that when you make an element a flex container, all its children become flex items. As a result, they lose their ability to accept new display values. Whatever display value you give to a flex item will be overridden by the flex container (spec reference). Apparently, Chrome and Firefox handle this differently.

Here's a related post: Flexbox on table doesn't work in Firefox

score 0 · Answer 3 · answered Jul 13 '17 at 15:13

0

Add

margin-left: auto;
margin-right: auto;

on your table and caption, and remove width:100% from caption codepen

answered Jul 13 '17 at 15:13

fen1x

5,616
6
28
39

Flexbox align-items not working on table element in Firefox

3 Answers3