LINUX.ORG.RU

Flexbox, или «Дэвид Блейн, раскукожь меня обратно!»

 , , , ,


0

1

Есть два сту^W столбца таблицы, им назначена равная ширина (width: 50%). Но когда одному из них поставить ещё display:flex, он скукоживается до одной четвёртой общей ширины таблицы. Почему так? Это баг или фича?

Код:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    td { width: 50%; }

    .d0 {
      display: flex;
      flex-direction: column;

      background-color: lightgray;
    }

    .d1 {
      display: flex;
      flex-grow: 1;

      border: 1px dotted gray;
    }

    .d2 {
      flex-grow: 1;

      background-color: yellow;
    }

    .d3 {
      width: 64px;
      flex-grow: 0;
      flex-shrink: 0;

      background-color: blue;
    }
  </style>
</head>

<body>
  <table width="100%">
    <tr>
      <td>what</td>
      <td class="d0">
        <div class="d1">
          <div class="d2">the</div>
          <div class="d3">fuck?</div>
        </div>
      </td>
    </tr>
  <table>
</body>

</html>

Добавляем этому столбцу width:100%, и он теперь занимает ровно половину ширины таблицы.

Казалось бы, проблема решена?

Не тут-то было. Столбцы у нас становятся разной высоты. Разной высоты, Джон!

Я и не знал, что так бывает. Это лечится?

http://pastebin.com/CHzBWm1f

kinkstarter
() автор топика
Ответ на: комментарий от kinkstarter

Не столбцы, конечно, а ячейки. Но как с этим бороться, всё равно не знаю (height:100% не помогает).

kinkstarter
() автор топика

Я не знаю, что происходит, но что, если всё сверстать через flexbox, отказавшись от таблицы?

sholom
()

Хозяйке на заметку: таблице можно дать «table-layout: fixed;» и получить одинаковую ширину у колонок без лишней магии.

ThisNameWasFree
()

У td есть свой display: table-cell, флексбокс контейнер можешь положить внутрь ячейки или выкинуть таблицу и сделать все флексбоксом.

zz ★★★★
()
Ответ на: комментарий от ThisNameWasFree

Жёстко заданную и не responsive?

anonymous
()
Ответ на: комментарий от zz

Но ведь это же бред: получается, семантика у свойства width меняется в зависимости от того, стоит ли на элементе display:flex.

anonymous
()
Ответ на: комментарий от anonymous

Ну так это уже не ячейка таблицы когда ты ей поставил display: flex.

zz ★★★★
()

Обломись. В ячейки придется div вкладывать, для всяких продвинутых фич, типа флексбокса и ellipsis.

Сверстай флексбоксом.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Что-то слишком долго его не выпускают, есть мнение что забили, в виду распространения идей материалайза и прочих компонентных поползновений.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.