Flexbox宽度随内容的变化，应该是固定的宽度 [英] Flexbox width variation with content, should be fixed width

查看：119
本文介绍了Flexbox宽度随内容的变化，应该是固定的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我遇到的问题是有很多信息的时候在内容div中，div的宽度超出了页面宽度。



我试过使用最大宽度样式，这会消除网站的响应。 / p>

JSFiddle

https://jsfiddle.net/z23rmo80/


$ b CSS 

  body {
 display：flex; 
 flex-direction：column; 
最小高度：100vh; 
 text-align：center; 
} 
 body .header {
 width：100％; 
 height：182px; 
背景：白色; 
} 
 body .holygrail-body {
 flex：1 0 auto; 
 display：flex; 
 width：1000px; 
 margin-right：auto; 
 margin-left：auto; 
} 
 body .holygrail-body .content {
 flex：1 0 auto; 
背景：lightgreen; 
 overflow-y：auto; 
} 
 body .holygrail-body .nav {
 width：240px; 
 list-style：none; 
 text-align：left; 
 order：-1; 
 
保证金：0; 
} 
 body .holygrail-body .aside {
 width：100px; 
 background：orange; 
} 
 body .footer {
 width：100％; 
 height：60px; 
 
} 
 .sidenav {
 height：100％; 
 width：0; 
位置：固定; 
 z-index：1; 
 top：0; 
剩下：0; 
 background-color：#fff; 
 overflow-x：hidden; 
转换：0.5s; 
 padding-top：60px; 
} 
 
 .sidenav a {
 padding：8px 8px 8px 32px; 
 text-decoration：none; 
 font-size：25px; 
颜色：＃818181; 
 display：block; 
转换：0.3s; 
} 
 
 .sidenav a：hover {
 color：＃f1f1f1; 
} 
 
 .sidenav .closebtn {
 position：absolute; 
 top：0; 
 right：25px; 
 font-size：36px; 
 margin-left：50px; 
} 
 .mobile-header {display：none;} 
 .hamburger {display：none;} 
 ul，ol {
 margin-top：10px; 
 
} 
 .nav li {
 list-style：none outside none; 
 line-height：36px; 
 margin-left：-15px; 
} 
 .nav li a {
 color：＃5f141f; 
 text-decoration：none; 
 text-shadow：2px 1px＃f6eaec; 
 font-size：18px; 
 margin-left：-15px; 
} 
 .sidenav li {
 list-style：none outside none; 
 line-height：36px; 
 margin-left：-15px; 
} 
 .sidenav li a {
 color：＃5f141f; 
 text-decoration：none; 
 text-shadow：2px 1px＃f6eaec; 
 font-size：18px; 
 margin-left：-15px; 
} 
 @media（max-width：700px）{
 body .holygrail-body {
 flex-direction：column; 
} 
 body .holygrail-body .nav，body .holygrail-body .aside {
 width：100％; 
} 
 .sidenav {padding-top：15px;} 
 .sidenav a {font-size：18px;} 
 .hamburger {display：inline; margin-left： - 900元;} 
 .nav {display：none;} 
 .mobile-header {display：inline;} 
 .header {display：none;} 
} 
  
 
  HTML  
 > < header class =header> 
< img src =header.jpgstyle =max-width：1848px; margin-right：auto; margin-left：auto; ALT =  > 
< / header> 
< header class =mobile-header> 
< img src =header.jpgstyle =width：100％; max-width：1848px; margin-right：auto; margin-left：auto; ALT =  > 
< / header> 
< div class =holygrail-body> 
< span class =hamburgerstyle =font-size：30px; cursor：pointeronclick =openNav（）>&＃9776;菜单< /跨度> 
< div id =mySidenavclass =sidenav> 
< a href =javascript：void（0）class =closebtnonclick =closeNav（）>& times;< / a> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>新项目< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< / ul> 
< / div> 
< div class =content> 
 
< h1>测试< / h1> 
 
< / div> 
 
< ul class =nav> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>新项目< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
< li>< a href =＃>信息页< / a>< / li> 
 
< / ul> 
 
 
< / div> 
< footer class =footer>©2017< / footer>


解决方案

2您需要做的事情：


$ b

  • 更改 flex中的 flex-shrink 值flex：1 0 auto 0 到 1 （ flex：1 1 auto 因为内容元素可以缩小


  • 由于你有一个很长的词，您还需要添加 word-wrap：break-word 在单词内插入换行符以防止文本溢出

    • ul>

    注意， word-wrap 已被重命名为 overflow-wrap ，尽管不是所有的浏览器都支持这个新名称，所以如果你使用它，现在我会保留旧的。



    stack-snippet 



      function openNav（）{document.getElementById mySidenav）。style.width =250px;} function closeNav（）{document.getElementById（mySidenav）。style.width =0;}

    body {display：flex; flex-direction：列;最小高度：100vh; text-align：center;} body .header {width：100％; height：182px; background：white;} body .holygrail-body {flex：1 0 auto;显示：flex;宽度：1000像素;保证金右：自动; margin-left：auto;} body .holygrail-body .content {flex：1 1 auto; / *改变* / background：lightgreen;溢出-y：auto;单词包装：分词; / *添加* /} body .holygrail-body .nav {width：240px; list-style：none; text-align：left;顺序：-1; margin：0;} body .holygrail-body .aside {width：100px; background：orange;} body .footer {width：100％; height：60px;}。sidenav {height：100％;宽度：0;位置：固定; z-index：1; top：0;左：0; background-color：#fff; overflow-x：hidden;过渡：0.5s; padding-top：60px;}。sidenav a {padding：8px 8px 8px 32px;文字修饰：无; font-size：25px;颜色：＃818181;显示：块; transitions：0.3s;}。sidenav a：hover {color：＃f1f1f1;}。sidenav .closebtn {position：absolute; top：0; right：25px; font-size：36px; margin-left：50px;} .mobile-header {display：none;}。hamburger {display：none;} ul，ol {margin-top：10px;}。nav li {list-style：none outside none; line-height：36px; margin-left：-15px;}。nav li a {color：＃5f141f;文字修饰：无; text-shadow：2px 1px＃f6eaec; font-size：18px;保证金左：-15px; } .sidenav li {list-style：none outside none; line-height：36px;保证金左：-15px; } .sidenav li a {color：＃5f141f;文字修饰：无; text-shadow：2px 1px＃f6eaec; font-size：18px;保证金左：-15px; } @media（max-width：700px）{body .holygrail-body {flex-direction：column; }体，.holygrail-body.nav，体.holygrail-body .aside {宽度：100％; } .sidenav {padding-top：15px;} .sidenav a {font-size：18px;} .hamburger {display：inline; margin-left：-900px;} .nav {display：none;} .mobile-header { display：inline;} .header {display：none;}}

    < script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script> < header class =header> < img src =header.jpgstyle =max-width：1848px; margin-right：auto; margin-left：auto; ALT = > < /报头> < header class =mobile-header> < img src =header.jpgstyle =width：100％; max-width：1848px; margin-right：auto; margin-left：auto; ALT = > < / header>< div class =holygrail-body> < span class =hamburgerstyle =font-size：30px; cursor：pointeronclick =openNav（）>&＃9776;菜单< /跨度> < div id =mySidenavclass =sidenav> < a href =javascript：void（0）class =closebtnonclick =closeNav（）>& times;< / a> < UL> < li>< a href =＃>主页< / a>< / li> < li>< a href =＃>新项目< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < / UL> < / DIV> < div class =content> < H1> Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst< / H1> < / DIV> < ul class =nav> < li>< a href =＃>主页< / a>< / li> < li>< a href =＃>新项目< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < li>< a href =＃>信息页< / a>< / li> < / ul>< / div>< footer class =footer>©2017

    p>

    I'm making a mobile responsive page and I'm using flexbox for the first time.

    The problem that I have is when there is a lot of information in the content div the div stretches very wide out of the page width.

    I've tried using max-width styles and that takes away the responsiveness of the site.

    JSFiddle

    https://jsfiddle.net/z23rmo80/

    CSS

    body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 182px;
  background: white;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
  width:1000px;
  margin-right:auto;
  margin-left:auto;
}
body .holygrail-body .content {
  flex: 1 0 auto;
  background: lightgreen;
  overflow-y: auto;
}
body .holygrail-body .nav {
  width: 240px;
  list-style: none;
  text-align: left;
  order: -1;

  margin: 0;
}
body .holygrail-body .aside {
  width: 100px;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;

}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
  .mobile-header{display: none;}
.hamburger{display: none;}
ul, ol {
    margin-top:10px;

}
.nav li {
    list-style: none outside none;
    line-height: 36px;
    margin-left:-15px;
}
.nav li a {
    color: #5f141f;
    text-decoration: none;
    text-shadow: 2px 1px #f6eaec;
    font-size: 18px;
    margin-left:-15px;
  }
  .sidenav li {
      list-style: none outside none;
      line-height: 36px;
      margin-left:-15px;
  }
  .sidenav li a {
      color: #5f141f;
      text-decoration: none;
      text-shadow: 2px 1px #f6eaec;
      font-size: 18px;
      margin-left:-15px;
    }
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .nav, body .holygrail-body .aside {
    width: 100%;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .hamburger{display: inline;margin-left:-900px;}
  .nav{display: none;}
  .mobile-header{display: inline;}
    .header{display: none;}
}

    HTML

      <header class="header">
    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
  <header class="mobile-header">
    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
<div class="holygrail-body">
  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">New Items</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
    </ul>
  </div>
  <div class="content">

  <h1>Test</h1>

  </div>

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">New Items</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>

  </ul>


</div>
<footer class="footer">©2017</footer>

    解决方案

    2 things you need to do:

    • Change the flex-shrink value in flex: 1 0 auto from 0 to 1 (flex: 1 1 auto) so the content element is allowed to shrink

    • As you have a very long word, you also need to add word-wrap: break-word to insert line breaks within words to prevent text from overflowing

    Note, word-wrap has been renamed to overflow-wrap, though not all browsers support the new name, so if you to use it, I would keep the old as well for now.

    Stack snippet

    function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

          body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 182px;
  background: white;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
  width:1000px;
  margin-right:auto;
  margin-left:auto;
}
body .holygrail-body .content {
  flex: 1 1 auto;                            /*  changed  */
  background: lightgreen;
  overflow-y: auto;
  word-wrap: break-word;                     /*  added  */
}
body .holygrail-body .nav {
  width: 240px;
  list-style: none;
  text-align: left;
  order: -1;

  margin: 0;
}
body .holygrail-body .aside {
  width: 100px;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;

}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
  .mobile-header{display: none;}
.hamburger{display: none;}
ul, ol {
    margin-top:10px;

}
.nav li {
    list-style: none outside none;
    line-height: 36px;
    margin-left:-15px;
}
.nav li a {
    color: #5f141f;
    text-decoration: none;
    text-shadow: 2px 1px #f6eaec;
    font-size: 18px;
    margin-left:-15px;
  }
  .sidenav li {
      list-style: none outside none;
      line-height: 36px;
      margin-left:-15px;
  }
  .sidenav li a {
      color: #5f141f;
      text-decoration: none;
      text-shadow: 2px 1px #f6eaec;
      font-size: 18px;
      margin-left:-15px;
    }
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .nav, body .holygrail-body .aside {
    width: 100%;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .hamburger{display: inline;margin-left:-900px;}
  .nav{display: none;}
  .mobile-header{display: inline;}
    .header{display: none;}
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <header class="header">
    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
  <header class="mobile-header">
    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
<div class="holygrail-body">
  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">New Items</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
    </ul>
  </div>
  <div class="content">

  <h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst</h1>
        
  </div>

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">New Items</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>

  </ul>


</div>
<footer class="footer">©2017</footer>

    这篇关于Flexbox宽度随内容的变化，应该是固定的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆