My goal is to create a reusable React library that can take a list of components and display them in a flex container. One key feature is that the library recalculates the component's width when it mounts or when the window is resized. If the total width of the child components exceeds the parent component's width, the excess children are hidden and a button is added at the end of the list to display them in a vertical dropdown. The component has a minimum width defined by a prop, but otherwise calculates its width based on the flex dom node containing all the children elements. The component itself is also a flex item with a flex property of
1 0 <value of minWidth property>The issue arises when I try to resize the component without using overflow: hidden on the flex container. Without this styling, the component fails to shrink and maintain its specified minimum width as intended. This behavior can be observed in the provided demo below. With overflow: hidden enabled, resizing works as expected, but it causes problems when child components render sub-components like dropdowns or date-pickers that need to remain visible.
I have considered several solutions involving tinkering with the child components themselves, such as using position: fixed, but since this library is meant to be flexible and work with any list of components, I prefer a fix at the parent container level if possible.
.js file
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 file
.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 file
<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>