flexbox中的水平滚动溢出父级答案

【问题标题】：Horizontal scroliing overflowing parent in flexboxflexbox中的水平滚动溢出父级
【发布时间】：2021-02-04 01:38:01
【问题描述】：

我正在尝试创建 2 个列 div，其中一个可以水平滚动（不换行），但它一直溢出他的父容器。问题是两个 div 都使用 flex 来计算它们的大小。

除了在其中一个上使用固定宽度外，有没有办法防止溢出？

<div class="container">
  <div class="small-container">

  </div>
  <div class="large-container">
    <div class="horiz-container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  background-color: grey;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.small-container {
  display: flex;
  flex-direction: column;
  flex: 0 0 200px;
  background-color: salmon;
  margin: 10px;
  box-sizing: border-box;
}

.large-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  background-color: lightBlue;
  margin: 10px;
  box-sizing: border-box;
}

.horiz-container {
  display: flex;
  flex-direction: row;
  height: 200px;
  background-color: purple;
  flex-wrap: nowrap;
  width: 100%;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
}

https://jsfiddle.net/0m6Lj2re/

【问题讨论】：

为什么你不想要一个固定的宽度？
因为我希望两列都对屏幕的宽度合理。

标签： html css layout flexbox

【解决方案1】：

所做的更改在 .large-container、.horiz-container 和 .box 类中

body {
    margin: 0;
}

div {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: row;
    background-color: grey;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.small-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 200px;
    background-color: salmon;
    margin: 10px;
    box-sizing: border-box;
}

.large-container {
    background-color: lightBlue;
    margin: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.horiz-container {
    /*height: 200px;*/
    background-color: purple;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
    display: inline-block;
}

<div class="container">
    <div class="small-container">

    </div>
    <div class="large-container">
        <div class="horiz-container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</div>

【讨论】：

应该可以水平滚动，所以需要flex: nowrap。为了更准确，我将其添加到问题正文中。谢谢:)
这正是我试图实现的目标。谢谢！
@Chelouche，当您获得足够的评分可以投票时，我很乐意在这篇文章中给我一个积极的评价！祝项目好运:)
没问题，我会的。你的建议真的很有帮助。我为此挣扎了一段时间。
很高兴我能帮上忙 :) 您可以将此答案标记为已接受的答案。