Flexbox в ячейке таблицы отображается в середине по вертикали

Question

Я использую flexbox в таблице. Таблица имеет 2 столбца, каждый с одной ячейкой. Левая ячейка очень большая и имеет высоту около 189%. Мой CSS выглядит следующим образом:

#openemail {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#openemail>#header {
  flex: 0 1 auto;
}

#openemail>#body {
  flex: 1 1 auto;
}

<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td>
      <div id="openemail">
        <div id="header">SSS</div>
        <div id="body">more SSS</div>
      </div>
    </td>
  </tr>
</table>

Как видите, гибкий контейнер заканчивается посередине, и его трудно найти. Мой вопрос: как я могу изменить свой CSS так, чтобы гибкий контейнер находился в верхней части ячейки таблицы?

Answer 1

РЕКОМЕНДУЕТСЯ:

Применение vertical-align: top к <td> представляется оптимальным решением в 2018 , которое полностью поддерживается в CSS3 и HTML5.Вот рабочий образец:

table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}

    <table id="app">
<tr>
    <td>
        <div id="emailslist">
            placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </td>
    <td style="vertical-align: top">
        <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
</tr>
</table>

Чтобы узнать больше о стиле vertical-align: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

НЕ РЕКОМЕНДУЕТСЯ:

Следующее решение также может работать, если вы используете более старые версии HTML: для атрибута valign для <td> будет top.Это выглядит примерно так:

table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}

    <table id="app">
<tr>
    <td>
        <div id="emailslist">
            placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </td>
    <td valign="top">
        <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
</tr>
</table>

Чтобы узнать больше об атрибуте valign: https://www.w3schools.com/tags/att_td_valign.asp

Надеюсь, это поможет!

Answer 2

Поскольку вы имеете дело с ячейками таблицы, в игру вступает свойство vertical-align.Это свойство применяется только к элементам inline-level и table-cell.

Значение по умолчанию свойства vertical-align, в соответствии со спецификацией , равно baseline.Тем не менее, основные браузеры, как правило, вместо этого используют middle значение .

В любом случае содержимое вашей ячейки таблицы центрируется по вертикали.

Вы можете переопределить этонастройка с помощью vertical-align: top.

Подробнее: Значение по умолчанию для выравнивания по вертикали для ячеек таблицы

Answer 3

Будет ли добавление вертикального выравнивания: сверху к ячейке таблицы делать то, что вы хотите?Как это:

<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td style="vertical-align: top;">
      <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
  </tr>
</table>