По сути, я хочу реализовать повторно используемую библиотеку в React, которая берет список компонентов и отображает их как гибкий контейнер.Когда компонент монтируется или когда пользователь изменяет размер окна, компонент пересчитывает его ширину, и если сумма его дочерних элементов превышает его собственную ширину, он скрывает лишние дочерние элементы и добавляет кнопку в конец списка, который отображает избыточное количество.дети в вертикальном выпадающем меню.Компоненту предоставляется реквизит, который определяет его минимальную ширину, но в противном случае он вычисляет его ширину, ссылаясь на узел flex dom, содержащий все дочерние элементы.Сам по себе это также элемент flex, свойство flex которого равно 1 0 <value of minWidth property>.
. Суть проблемы в том, что все прекрасно работает, если я добавлю overflow: hidden в контейнер flex.Когда пользователь изменяет размеры окна, размер будет пересчитываться от X до предоставленной минимальной ширины.Без переполнения: скрытый, однако, его ширина имеет пол, равный сумме его дочерних элементов.Вы можете наблюдать это в демоверсии ниже.Если вы откроете devtools и измените размер окна, вы увидите значение clientWidth левого и правого контейнеров (каждый из которых будет отдельным экземпляром компонента, описанного выше).Предполагается, что при уменьшении размера окна левый и правый контейнер уменьшатся до 200 и 300 пикселей соответственно, в течение которых я смогу подсчитать количество детей, скрываемых в каждом (1 слева и1, а затем в конечном итоге 2 в правом контейнере).Если вы раскомментируете строку 9 в scss-файле codepen, вы можете наблюдать это точное поведение.
Причина, по которой overflow: hidden не является жизнеспособным решением, заключается в том, что в некоторых случаях один или несколько дочерних компонентов будут отображатьподкомпонент, такой как выпадающий / компонент выбора даты, который затем будет скрыт из-за родительского элемента overflow: hidden.В тех случаях, когда я хочу использовать это, подкомпонент абсолютно позиционируется (и привязывается к дочернему компоненту), и, таким образом, не влияет на ширину дочерних компонентов относительно родительского гибкого контейнера.
Я могу подумать о нескольких решениях, которые включают в себя работу с самими дочерними компонентами (с использованием решений, включающих position: fixed, etC), но так как это предназначается для многоразовой библиотеки, которая просто принимает список компонентов для отображения, я быхотел бы сохранить исправление для родительского контейнера, если это возможно.
.js файл
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const handleWindowResize = event => {
console.log('left: ', left.clientWidth);
console.log('right: ', right.clientWidth);
};
window.addEventListener('resize', handleWindowResize);
.scss файл
.toolbar {
display: flex;
width: 100%;
border: 1px solid black;
}
.left, .right {
display: flex;
// overflow: hidden;
}
.left {
flex: 1 0 200px;
}
.right {
flex: 1 0 300px;
justify-content: flex-end;
}
.item {
border: 1px solid black;
width: 100px;
height: 50px;
}
.html файл
<div class='toolbar'>
<div class='left'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<div class='right'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
Демонстрация Codepen