CSS Flexbox - Как сделать так, чтобы гибкий элемент сжимался, чтобы соответствовать гибкому контейнеру? - PullRequest
Новая
       161

CSS Flexbox - Как сделать так, чтобы гибкий элемент сжимался, чтобы соответствовать гибкому контейнеру?

0 голосов
/ 07 августа 2020

Я пытаюсь уменьшить размер гибкого элемента, чтобы он соответствовал гибкому контейнеру, но это не работает.

Вот мой код

Я использую React и AntD (см. ниже для элементов в консоли) 

    <Card className='items-col' title='Item List'>
        <MUIDataTable
            data={items}
            columns={columns}
            options={options}
        />
    </Card>

CSS

.quotation-grid .items-col {
    grid-area: items;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.quotation-grid .items-col .ant-card-body {
    flex: 0 1 0;
}

Элементы 

<div class='ant-card items-col ant-card-bordered'>
    <div class='ant-card-head'>...</div>
    <div class='ant-card-body'>...</div> // i want this to shrink to fit the container
</div>

Скриншот

enter image description here

введите описание изображения здесь

Спасибо всем за помощь, дайте мне знать, если я сделал что-то не так, по сути, почему я это делаю, так это то, что я могу настроить внутренние строки таблицы на переполнение: auto, чтобы прокрутка переполнения только внутри строк таблицы.

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Меня немного смущает 

flex: 0 1 0;

Разве вы не говорите флексбоксу «Мой элемент должен иметь высоту 0, если мы переполнимся, уменьшим его»? Он никогда не может сжиматься, так как для flexbox он уже требует только высоты 0.

Возможно, вы предпочтете использовать «flex: 1 0 0», что аналогично «flex: 1». Это означает: «Мой элемент должен иметь высоту 0, но если у нас еще есть место, увеличивайте» --- или «займите доступное место». Однако, если содержимое все еще слишком велико, оно все равно будет переполняться. Вам может понадобиться контейнер с 

flex: 1;
overflow: auto;

, который затем займет все доступное пространство и никогда не будет вынужден расти его дочерними элементами.

0 голосов
/ 07 августа 2020

Скорее всего, проблема в заполнении, как подсказывает зеленая область? В любом случае, попробуйте следующее: 

.ant-card-body {
  padding: 0;
  margin: 0;
}

Если заполнение сработало, удалите поле, потому что я не могу точно сказать, какой из них на снимках экрана.

...