flexbox 中的溢出问题

Question

标记和样式

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

#app {
  display: flex;
  width: 100%;
}
.box-1 {
  border: 1px solid red;
}
.box-2 {
  padding: 10px;
  border: 1px solid blue;
  flex: 1;
}
.overflow-container {
  padding: 10px;
  width: 100%;
  border: 1px solid green;
  overflow: auto;
}

.overflow-content {
  width: 100%;
  min-width: 2000px;
  border: 1px solid pink;
}

<div id="app">
      <div class="box-1">This is 1</div>
      <div class="box-2">
        This is 2
        <div class="overflow-container">
          <div class="overflow-content">This is my overflow content</div>
        </div>
      </div>
    </div>

使用

display: flex

属性时，

overflow: auto

属性无法按预期运行。相反，父元素的大小会扩展以适应溢出内容的宽度。我正在寻找一种解决方案来实现扩展内容的水平滚动条。 没有 flexbox 也能按预期工作

Answer 1

将此代码写入您的父类中

#app {
      display: flex;
      width: 100%;
      overflow: auto;
    }