我如何阻止 Parent Div 因为它的孩子而扩展？答案

【问题标题】：How Do I Stop Parent Div From Expanding Because of Its Children?我如何阻止 Parent Div 因为它的孩子而扩展？
【发布时间】：2021-12-17 22:20:34
【问题描述】：

所以子 div 有一个彼此相邻的项目列表，每个项目都有固定宽度。

在此图像中，子 div 超出 MainContent，但在实际应用中，MainContent 扩展以适应子 div 的宽度。

我想这样当孩子溢出时，它只有一个滚轮而不是变得那么大。

我尝试将 Child Div 设置为 'overflow-x : auto'

子 div 宽度为 100%，MainContent 也是如此。

JSX/HTML

<div className = 'app'>
  <div className = 'navbar'></div>
    <div className = 'maincontent'>
      <div className = 'child'>
        <div className = 'childlist'>
          <button className = 'btn'></button>
          <button className = 'btn'></button>
          <button className = 'btn'></button>
        </div>
      </div>
    </div>
  </div>

CSS

.app : {
    display : flex,
    width: 100vw,
    height :100vh
  }
  .navbar : {
    display : flex,
    flex-direction :column,
    width : 112
  }
  .maincontent:{
    display : flex,
    width : 100%
  }
  .child: {
    width :100%
  }
  .childlist:{
    display : flex,
    width :90%
  }
  .btn:{
    width : 200,
    height :200
  }

【问题讨论】：

你的代码在哪里？
不要截图和文字，只发布我们可以运行和玩的代码。
对不起，我刚刚添加了它。
你的代码语法不好。在第一个代码示例中，您编写
太多了。这里是 CSS：developer.mozilla.org/de/docs/Learn/…

标签： javascript html css reactjs

【解决方案1】：

你所有的容器宽度都是相对的，所以它会调整，而不是溢出。如果您孩子的宽度是父母的 %，那么它永远不会溢出。

你需要有固定的宽度才能让它溢出。

加上你的代码看起来很乱，你可能想试试 Prettier

【讨论】：