blocks|key|6049868|text|看看你的代码，如果overflow-x:+scroll+!important;是我的大no+no，它应该是你使用的最后一个选择。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|6049869|现在根据您的需求，您需要特别提供overflow-x:+scroll，如果您提供overflow:auto，它会在需要时自动为您提供滚动。|6049870|现在是什么时候？？|BOLD|6049871|当height和width大于浏览器大小时，您将获得scrolling功能。|6049872|如果您需要在浏览器大小范围内滚动，那么，减小container的宽度并应用overflow:auto;，这将使您看到滚动。|6049873|这里是我所说的例子：|6049874|所以它的意思是，当你想要在浏览器中滚动时，你应该有一个child类，这个类的宽度应该小于内容，这样它就可以溢出。|6049875|​|6049876|.org-chart+{
++display:+flex;
++justify-content:+center;
++left:+29px;
++position:+relative;
++overflow:+auto;
++border:+1px+solid+black;
++/*Main+container+*/
++height:+300px;
++width:+65%25;
}

.content+{
++width:+100%25;
++/*+you+should+have+another+width+inside+main+container+*/
++border:+1px+solid+red;
}|code-block|syntax|javascript|6049877|<div+class="org-chart"+appOrgachart+[empArr]="employees"+[orgaArr]="orgaArr"+*ngIf="employees.length>0+&&+!isLoading">
++<ul>
++++<li+*ngFor="let+emp+of+empArr">
++++++<div+class="user">
++++++++<div+class="name">{{emp.empname}}</div>
++++++++<div+class="role">{{emp.empdesgname}}</div>
++++++++<div+class="content">Notice+that+the+text-align-last+property+sets+the+alignment+for+all+last+lines+within+the+selected+element.+So,+if+you+have+a+with+three+paragraphs+in+it,+text-align-last+will+apply+to+the+last+line+of+EACH+of+the+paragraphs.+To+use+text-align-last
++++++++++on+only+the+last+paragraph+in+the+container,+you+can+use+:last+child,+see+example+below.+Notice+that+the+text-align-last+property+sets+the+alignment+for+all+last+lines+within+the+selected+element.+So,+if+you+have+a+with+three+paragraphs+in+it,
++++++++++text-align-last+will+apply+to+the+last+line+of+EACH+of+the+paragraphs.+To+use+text-align-last+on+only+the+last+paragraph+in+the+container,+you+can+use+:last+child,+see+example+below.+Notice+that+the+text-align-last+property+sets+the+alignment
++++++++++for+all+last+lines+within+the+selected+element.+So,+if+you+have+a+with+three+paragraphs+in+it,+text-align-last+will+apply+to+the+last+line+of+EACH+of+the+paragraphs.+To+use+text-align-last+on+only+the+last+paragraph+in+the+container,+you+can
++++++++++use+:last+child,+see+example+below.+Notice+that+the+text-align-last+property+sets+the+alignment+for+all+last+lines+within+the+selected+element.+So,+if+you+have+a+with+three+paragraphs+in+it,+text-align-last+will+apply+to+the+last+line+of+EACH
++++++++++of+the+paragraphs.+To+use+text-align-last+on+only+the+last+paragraph+in+the+container,+you+can+use+:last+child,+see+example+below.</div>
++++++</div>
++++</li>
++</ul>
</div>|6049878|6049879|entityMap^0|9|U|17|5|0|G|I|14|D|0|0|9|0|1|6|8|5|Q|9|0|M|9|11|E|0|0|A|0|R|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@$9|1F|A|1G|B|J]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1T|8|@$9|1U|A|1V|B|J]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|20|8|@]|D|@]|E|$X|Y]]|$1|Z|3|10|5|W|7|21|8|@]|D|@]|E|$X|Y]]|$1|11|3|T|5|6|7|22|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|13|$]]

<p>Looking at your code, providing <code>overflow-x: scroll !important;</code> is big <code>no no</code> from me, it should be the last option for you to use.</p>

<p>now coming to your requirement, you need to specifically provide <code>overflow-x: scroll</code> if you give <code>overflow:auto</code> it automatically gives you a scroll when needed.</p>

<p><strong>now when is it??</strong></p>

<p>when the <code>height</code> and <code>width</code> is more than the browser size that is when you will get the <code>scrolling</code> feature.</p>

<p>if you need a scroll within browser size then, decrease the width of the <code>container</code> and apply <code>overflow:auto;</code> that should give you a scroll on sight.</p>

<p><strong>here is the example of what I am saying:</strong></p>

<p>so what does it mean is when you want a scroll within the browser then you should have a <code>child</code> class and the width of that class should be less w.r.t the content so that it can overflow.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.org-chart {
  display: flex;
  justify-content: center;
  left: 29px;
  position: relative;
  overflow: auto;
  border: 1px solid black;
  /*Main container */
  height: 300px;
  width: 65%;
}

.content {
  width: 100%;
  /* you should have another width inside main container */
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length&gt;0 &amp;&amp; !isLoading"&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let emp of empArr"&gt;
      &lt;div class="user"&gt;
        &lt;div class="name"&gt;{{emp.empname}}&lt;/div&gt;
        &lt;div class="role"&gt;{{emp.empdesgname}}&lt;/div&gt;
        &lt;div class="content"&gt;Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last
          on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it,
          text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment
          for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can
          use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH
          of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1555169|text|应用max-width属性为64%25和overflow:auto|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1555170|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>apply max-width property as 64% and overflow:auto</p>


<p>@Here, I'm trying to create horizontal scrolling for a div element for my application. The div element consists of ul li element and some other div tags for my requirement. The Ul li elements are dynamically added inside the parent div element. </p>

<p>Although I could get the vertical scrolling working properly and my horizontal scrolling is displayed using overflow-x: scroll. I am not able to scroll it, the ul li elements gets distorted. I have set a predefined width of 700px for the div container also. Its like the horizontal scrolling is disabled. I am not using overflow anywhere else in the application</p>

<pre><code>&lt;div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length&gt;0 &amp;&amp; !isLoading"&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let emp of empArr"&gt;
      &lt;div class="user"&gt;
       &lt;div class="name"&gt;{{emp.empname}}&lt;/div&gt;
        &lt;div class="role"&gt;{{emp.empdesgname}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>My CSS file:</p>

<pre><code>.org-chart {
    display: flex;
    justify-content: center;
    left: 29px;
    position: relative;
    overflow-x: scroll !important;
    overflow-y: scroll;
    height: 400px;
    width: 65%;
    transform: translateY(12%);
}
</code></pre>


Horizontal scroll not working on a div element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

@这里，我尝试为我的应用程序的div元素创建水平滚动。div元素由ul li元素和一些其他div标签组成，以满足我的需求。Ul li元素是动态添加到父div元素中的。虽然我可以使用overflow-x: scroll正常运行垂直滚动和水平滚动。我无法滚动它，ul li元素被扭曲了。我也为div容器设置了700px的预定...

问水平滚动在div元素上不起作用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平滚动在div元素上不起作用EN