大于动态宽度父项时，弹性项目上的滚动条

Posted 2023-03-07

【中文标题】大于动态宽度父项时，弹性项目上的滚动条

【英文标题】：Scrollbar on flex item when bigger than dynamic width parent

【发布时间】：2019-04-16 03:47:21

【问题描述】：

我有一个居中的 flexbox 结构，它显示带有客户列表的框。

我想实现，当屏幕变得比#box div 内的内容窄时，它不会隐藏在视口之外，而是将溢出添加到最长的项目，即带有表格的#list，因此#box 可以动态缩小。

当我将 width: 100% 添加到 #box 但我不想要 框全屏宽度，直到它至少不等于内容的大小。

| JSFIDDLE DEMO |

body, html 
  
  margin: 0;
  width: 100%;
  height: 100%;
 font-size: 16px;
  


* 
  
  box-sizing: border-box;
  


#wrap 
  
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  flex-direction: column;
  


#box 
  
  background-color: #dcdcdc;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
  
  


#box > div 
  
  flex: 1 0 auto!important;
  


#title 
  
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: blue;


table 
  
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
  white-space: nowrap;
  width: 100%;


table thead 
  
  font-weight: bold;


table tbody tr 
  
  height: 30px;


table td 
  
  padding: 0 5px;


#list 
  
  overflow: auto;
  background-color: rgba(0,0,0,0.05);
  

<div id="wrap">
    <div id="box">
      <div id="title">
      List of customers
      </div>
      <div id="list">
      <table>
        <thead>
          <tr>
            <td>First name</td>
            <td>Last name</td>
            <td>Address</td>
            <td>Telephone</td>
            <td>Decription</td>
          </tr>
        </thead>
        <tbody>
           <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25th Jeffersons</td>
            <td>555 2589654123</td>
            <td>Pretty bad boy</td>
          </tr>
          <tr>
            <td>Anna</td>
            <td>Redford</td>
            <td>Trading street 252</td>
            <td>555 2541258745</td>
            <td>Booty babe</td>
          </tr>
          <tr>
            <td>Jack</td>
            <td>Jackson</td>
            <td>Dummy Dumm 55</td>
            <td>555 123456789</td>
            <td>Random persona</td>
          </tr>
          <tr>
            <td>Buck</td>
            <td>Buckson</td>
            <td>Dummy Dumm 66</td>
            <td>555 987654321</td>
            <td>Another random persona</td>
          </tr>
        </tbody>
      </table>
      </div>
  </div>
</div>

---

1 - 全屏窗口

2 - 调整大小（更小）的窗口

3 - 调整大小（更小）的窗口 - 想要的结果

12

3

【参考方案1】：

尝试为#box 添加max-width: 100%; 而不是width: 100%; - 它应该可以解决问题。

【参考方案2】：

body, html 
  
  margin: 0;
  width: 100%;
  height: 100%;
 font-size: 16px;
  


* 
  
  box-sizing: border-box;
  


#wrap 
  
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  flex-direction: column;
  


#box 
  
  background-color: #dcdcdc;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
  
  


#box > div 
  
  flex: 1 0 auto!important;
  


#title 
  
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: blue;


table 
  
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
  white-space: nowrap;
 max-width: 100%;


table thead 
  
  font-weight: bold;


table tbody tr 
  
  height: 30px;


table td 
  
  padding: 0 5px;


#list 
  
  overflow: auto;
  background-color: rgba(0,0,0,0.05);
  

<div id="wrap">
    <div id="box">
      <div id="title">
      List of customers
      </div>
      <div id="list">
      <table>
        <thead>
          <tr>
            <td>First name</td>
            <td>Last name</td>
            <td>Address</td>
            <td>Telephone</td>
            <td>Decription</td>
          </tr>
        </thead>
        <tbody>
           <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25th Jeffersons</td>
            <td>555 2589654123</td>
            <td>Pretty bad boy</td>
          </tr>
          <tr>
            <td>Anna</td>
            <td>Redford</td>
            <td>Trading street 252</td>
            <td>555 2541258745</td>
            <td>Booty babe</td>
          </tr>
          <tr>
            <td>Jack</td>
            <td>Jackson</td>
            <td>Dummy Dumm 55</td>
            <td>555 123456789</td>
            <td>Random persona</td>
          </tr>
          <tr>
            <td>Buck</td>
            <td>Buckson</td>
            <td>Dummy Dumm 66</td>
            <td>555 987654321</td>
            <td>Another random persona</td>
          </tr>
        </tbody>
      </table>
      </div>
  </div>
</div>

https://jsfiddle.net/65wfnegs/4/ 我也更新了你的小提琴，你应该使用 max-width 作为盒子和表格而不是给定宽度:)