Html Flexbox宽度随内容变化，应为固定宽度_Html_Css_Flexbox

Html Flexbox宽度随内容变化，应为固定宽度

html css

Html Flexbox宽度随内容变化，应为固定宽度,html,css,flexbox,Html,Css,Flexbox,我正在制作一个移动响应页面，我第一次使用flexbox 我遇到的问题是，当content div中有很多信息时，div会延伸到页面宽度之外我尝试过使用“最大宽度”样式，这会削弱网站的响应能力 JSFiddle CSS body { display: flex; flex-direction: column; min-height: 100vh; text-align: center; } body .header { width: 100%; height: 182p

我正在制作一个移动响应页面，我第一次使用flexbox

我遇到的问题是，当content div中有很多信息时，div会延伸到页面宽度之外

我尝试过使用“最大宽度”样式，这会削弱网站的响应能力

JSFiddle

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>

您需要做的两件事：

将
```
flex:1 0 auto
```
中的弹性收缩值从
```
0
```
更改为
```
1
```
（
```
flex:1 auto
```
），以便允许收缩
```
内容
```
元素
由于单词很长，还需要添加
```
wordwrap:break-word
```
以在单词中插入换行符，以防止文本溢出

请注意，

wordwrap

已重命名为

overflow wrap

，尽管并非所有浏览器都支持新名称，因此如果您想使用它，我将暂时保留旧名称

堆栈片段

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

正文{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
文本对齐：居中；
}
正文.标题{
宽度：100%；
高度：182px；
背景：白色；
}
车身，有孔导轨车身{
弹性：10自动；
显示器：flex；
宽度：1000px；
右边距：自动；
左边距：自动；
}
body.holygrail body.content{
弹性：1 1自动；/*已更改*/
背景：浅绿色；
溢出y：自动；
换行：断开单词；/*已添加*/
}
车身。holygrail车身。导航{
宽度：240px；
列表样式：无；
文本对齐：左对齐；
顺序：-1；
保证金：0；
}
车身，有孔轨道车身，靠边{
宽度：100px；
背景：橙色；
}
正文.页脚{
宽度：100%；
高度：60px；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#fff；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
.mobile头{显示：无；}
.hamburger{显示：无；}
ul，ol{
边缘顶部：10px；
}
李国荣先生{
列表样式：无外无；
线高：36px；
左边距：-15px；
}
李娜先生{
颜色：5f141f；
文字装饰：无；
文本阴影：2px 1px#f6eaec；
字号：18px；
左边距：-15px；
}
李先生{
列表样式：无外无；
线高：36px；
左边距：-15px；
}
李思达先生{
颜色：5f141f；
文字装饰：无；
文本阴影：2px 1px#f6eaec；
字号：18px；
左边距：-15px；
}
@介质（最大宽度：700px）{
车身，有孔导轨车身{
弯曲方向：立柱；
}
车身，holygrail车身，导航，车身，holygrail车身，靠边{
宽度：100%；
}
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
.hamburger{显示：内联；左边距：-900px；}
.nav{显示：无；}
.mobile头{display:inline；}
.header{display:none；}
}


☰ 菜单












SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS













©2017