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

Question

我有一个居中的flexbox结构，可以显示带有客户列表的盒子。

我想实现的是，当屏幕变得比df3 %>% filter(date >= "2014-1") %>% # we filter our data from 2014 ggplot(aes(x=date,y=salesdiff, fill = as.factor(factordiff))) + geom_col() + theme(axis.text.x = element_text(angle = 45, hjust = 1)) # adds label rotation div内的内容狭窄时，它不会隐藏在视口之外，而是会向最长的项（即带有表的#box）添加溢出，因此{{1} }可以动态缩小。

  

当我将#list添加到#box但却不希望   框全屏宽度，直到不小于内容大小为止。

| JSFIDDLE DEMO |

width: 100%

#box

---

1-全屏窗口

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

3-调整大小（较小）的窗口-所需结果

1 { 2

3

Answer 1

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

Answer 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而不是给定width :)