盒子组件内的项目溢出

【问题标题】：Overflow of Items inside box component盒子组件内的项目溢出
【发布时间】：2021-02-18 03:00:29
【问题描述】：

我打算有一个盒子组件。它里面有一些弹性项目。我无法容纳盒子里的所有物品。当我减小宽度时，盒子宽度保持不变，其他组件溢出。如何避免这种情况并修复我的代码？

这是我的代码的链接：

https://codesandbox.io/s/bold-wildflower-l4t9h?file=/src/App.js

【问题讨论】：

【解决方案1】：

如果你想将它包含在弹性盒子中，你需要使用弹性包装

style={{
    display: "flex",
    flexWrap:"wrap",
    flexDirection: "row",
    borderStyle: "solid",
    borderWidth: "thick",
    boxSizing: "border-box",
    margin: "1%"
  }}

【讨论】：

flexwrap 有效。是否可以在不增加盒子高度的情况下包裹所有东西并动态增加盒子的宽度？
该框实际上是响应式的，但是由于您的图像的宽度和高度是固定的，因此会导致响应性问题
是的，但我希望不要增加盒子的高度，而是增加盒子的宽度并容纳所有元素
这就是我的意思，盒子的宽度正在增加，但图像的宽度超过了盒子