时间戳

首页 > 解决方案 > flex列内的水平滚动div

css - flex列内的水平滚动div

问题描述

我似乎在 flex 列中没有水平滚动的 div。

密码笔

.container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; }
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { padding: 20px; }

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
  <div class='side-nav'>
  </div>
  <div class='main'>
    <h1>Test</h1>
    
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>
    
    <p>Some paragraph below the scrollable box</p>
  </div>
</div>

如果我将max-widthof更改.scrollable为px它会起作用，但我需要它来填充该列。

我错过了什么？

标签： cssflexbox

解决方案

在我看来，这是一个模块“错误”（Wierd）。无论如何，一个非常简单的解决方案是使用flex-basis（而不是width）。

步骤 1main添加width: 0；

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>
    
    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

第 2 步 -main添加flex-basis: 100%；

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
  flex-basis: 100%;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>

    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

另一种选择是使用width: 0;&flex-grow:1

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
  flex-grow: 1;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>

    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

我不喜欢这些想法中的任何一个——但这就是生活……

推荐阅读