javascript - 为什么div里面溢出: hidden; div not taking full width of it's content?

Question

.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 container() {
    return document.querySelector('.container');
  }

  componentDidMount() {
    const itemwidth = calcItemWidth(this.container.clientWidth, 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 style={container} className="container">
        {this.renderChildren()}
      </div>
    )
  }
}

export default Container

我有一个名为 container 的组件。 Container 的宽度固定为 800px，并且overflow hidden。在 container 中，我有 inner，我希望 inner 是它包含的元素的宽度。因此，如果我有 4 个 listItems，则内部宽度应为 1600px。

我尝试将 inner 的宽度设置为 width: 100% 和 min-width: 100% 等，但它没有占用其子项的宽度。如何让inner超出容器的宽度？

编辑:内部的溢出不必可见，也不必有 slider 。它在物理上必须是其子项的总宽度。

Answer 1

添加display: inline-block;到inner类