书山有路勤为径,学海无涯苦作舟

CSS弹性布局父容器被内容撑开

123浏览

复现

如下方代码,给#testdom设置宽度自适应父容器剩余宽度,但是当过长时就会把父容器撑开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test demo</title>
</head>
<body>
<div style="
display: flex;
justify-content: space-between;
width: 700px;
overflow: scroll">
  <div id="test"
       style="
       background: #0d47a1;
       flex: 1;
       height: 100px">
    <div id="sub" style="width: 300px"></div>
  </div>
  <div style="
  background: #00c853;
  height: 100px;
  width: 100px;">

  </div>
</div>
</body>
</html>
正常状态下显示效果
#sub节点with为800px时引起的内容被撑开

解决方法

在需要设置宽度自动为剩余空间时,设置节点width:0,如上方的示例应改为:

<div id="test"
     style="
       background: #0d47a1;
       flex: 1;
       width:0;
       height: 100px">
  <div id="sub" style="width: 300px"></div>
</div>

本文章由 https://itdashu.com 原创发布,欢迎转载,转载请注明出处。
投稿或联系站长请发送邮件至 leno@itdashu.com。

抢沙发

共同学习,写下你的评论
姓名
电子邮件
个人主页