.container {
white-space: nowrap;
overflow: hidden;
}
.inner {
width: 100%;
}
.list-item {
display: 'inline-block',
boxSizing: 'border-box',
border: '3px solid black'
}
import React, { Component } from 'react'
function calcItemWidth(width, tiles) {
return width / tiles
}
export class Container extends Component {
constructor() {
super(...arguments);
}
get containerSize() {
return document.querySelector('.container').clientWidth;
}
componentDidMount() {
const itemwidth = calcItemWidth(this.containerSize, 2)
const listItems = document.querySelectorAll('.list-item');
Array.from(listItems)
.map(item => {
item.style.width = `400px`;
})
}
renderChildren() {
return this.props.children.map(
(child, index) => (
<li key={child.key} data-index={index} className="list-item" style={listItem}>
{child}
</li>
)
)
}
render() {
return (
<div className="container">
{this.renderChildren()}
</div>
)
}
}
export default Container
In my component called Container, I have set a fixed width of 800px and applied overflow: hidden. Inside the Container, there is an element named inner, which should expand to the total width of its children. For example, if there are 4 listItems, the inner should be 1600px wide.
I have attempted to set the width of inner to width: 100% and min-width: 100%, but it does not adjust to the width of its children. How can I make the inner element expand beyond the width of the container?
UPDATE: The overflow of the inner element does not need to be visible or have a scroll bar. It simply needs to match the combined width of its children elements.