Как мы можем сделать один столбец в два раза шире другого, не используя абсолютные значения?

Question

Пример:

<table width="500">
    <tr>
        <td width="50">1</td>
        <td width="100%">2</td>
        <td width="100">3</td>
    </tr>
</table>

Если я не ошибаюсь, если ширина указана в процентах, это процент от общей ширины родительского элемента, а не процент от оставшейся ширины , правильно?

Хорошо, хорошо, что происходит, когда мы смешиваем проценты и ширину пикселей? В приведенном выше примере столбец 2 занимает столько места, сколько может , и сжимает 1 и 2 по сторонам , но не скрывает их; это дает им достаточно места для отображения их содержимого, даже если установлен overflow:hidden.

Если вместо этого мы изменим столбец 2 на 10% , снова процент, кажется, будет иметь приоритет, однако он все еще, кажется, учитывает пропорциональность 1, а 3 - 3 все еще вдвое шире, чем 1, даже если точная ширина не соответствует указанной.

Так что, если мы хотим установить 2 столбца и позволить 3-му столбцу заполнить оставшееся пространство? Легко! Просто полностью опустите значение .

Хорошо, но что, если мы хотим установить один столбец с явной шириной в пикселях, а 2-й должен быть вдвое больше третьего, чтобы заполнить оставшееся пространство? Это возможно даже в HTML / CSS?

образец скрипки

Answer 1

Похоже, это работает в Chrome, но не в IE или Edge:

<table style="width: 500px;">
    <tr style="display: flex;">
        <td style="width: 50px;">1</td>
        <td style="flex-grow: 2;">2</td>
        <td style="flex-grow: 1;">3</td>
    </tr>
</table>

Однако, с <div>, похоже, работает в Chrome и Edge:

<div style="width: 500px; display: flex;">
    <div style="width: 50px;">1</div>
    <div style="flex-grow: 2;">2</div>
    <div style="flex-grow: 1;">3</div>
</div>

Iне очень много использовал flex, но я считаю, что число после flex-grow - это количество оставшегося пространства, которое будет занято каждым элементом в элементе flex.

Редактировать: Макет Flexboxв настоящее время находится в рекомендации кандидата W3C.Подробнее об этом можно прочитать здесь .