LINUX.ORG.RU

Растянуть flexbox на всю высоту ячейки таблицы

 , ,


0

1
<!DOCTYPE html>
<html>
  <head>
    <style>
td {
  width: 50%;
  background-color: lightgray;
}
.flex {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: yellow;
  height: 100%;
}
.item {
  background-color: green;
  flex-grow: 1;
}
    </style>
  </head>
  <body>
    <table>
        <tbody>
           <tr>
              <td>padding<br>padding<br>padding<br>padding<br>padding<br>padding<br></td>
              <td>
                  <div class="flex">
                      <div class="item">mmm
                      </div>
                      <div class="item">mmm
                      </div>
                  </div>
              </td>
           </tr>
        </tbody>
    </table>
  </body>
</html>


Как сделать так, чтобы div.flex растянулся на всю высоту (и растянул своих детей div.item)?

вынеси в какой-то пен чтоб сразу редактировать можно было

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

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

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

подумай над другой реализацией, у тебя тут не с флексом а с головой проблема, сделай иначе или без флекса вобще, нужна таблица сделай таблицами и не парься, сам вид ишь если высоту задать все работает ок (читай хочешь невозможного).

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

Вот мне и надо под текст. И чтобы флексбокс расширялся, если требуется.

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

еще скажи что он не расширяется. зачем тебе там флексбокс я вообще не понял, нарисуй чего достичь надо, в джоб тебе сверстают.

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