代码之家 › 专栏 › 技术社区 › yarek

css3flex:如何创建两列:100%+固定宽度?

flexbox css3 css

yarek · 技术社区 · 8 年前

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:100%;
}
#usersContainer {
  background-color: green;
  width:320px;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

问题是:当渲染时,

有什么办法纠正吗?(我需要使用显示:柔性,不是绝对的)

2 回复 | 直到 8 年前

Temani Afif 8 年前

你面对的是收缩效果。因为总宽度(100%+320px)大于100%,所以两个元素都会收缩,以适合其父容器。

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:100%;
}
#usersContainer {
  background-color: green;
  width:320px;
  flex-shrink:0;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

或者不用 width:100% 换成 flex:1

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width:100%;
}
#chatContainer {
  background-color: red;
    flex:1;
}
#usersContainer {
  background-color: green;
  width:320px;
}

<div id=“header”>页眉</div>
<div id=“聊天和用户容器”>
</div>
<div id=“usersContainer”>
用户容器

</div>

undg 8 年前

你可以用 calc() #chatContainer ,或 min-width #usersContainer

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:calc(100% - 320px);
}
#usersContainer {
  background-color: green;
  width:320px;
  min-width: 320px;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

2 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

2 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

2 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

2 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前