相关疑难解决方法(0)

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我想定位Edge并让flexbox与Firefox 33/Chrome相似,有关详细信息,请参阅此问题.

可以在CSS中定位Edge吗？

自从Firefox Nightly(35.0a1)的最新版本(？)发布以来,我一直遇到text-overflow: ellipsis一个Flexbox容器内部的问题flex-direction: row,每列的宽度为50%.

演示:

.container {
  width: 300px;
  background: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 50%;
}

.column p {
  background: gold;
  
  /* Will not work in Firefox Nightly 35.0a1 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="container">
  <div class="row">
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly …

在上次firefox-update之后,一些css3代码被破坏了...... 例子(jsfiddle).

• 在铬中:
• 在Firefox 34中:

是bug吗？还是正常工作？我需要改变什么来修复它？为什么#flex不适当调整大小？

HTML:

<div id="outer">
    <div id="flex">
        <label>123</label>
        <input type="text" value="some text" />
    </div>
</div>  

CSS:

#outer { display: flex; }

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

label { flex: 0 0 80px; }

我在内容div中有三个div,当浏览器调整大小时

• 蓝色和红色div必须有固定的宽度
• 绿色div必须调整到左侧空间

我也在css中试过这个

.yellow{
    height: 100%;
    width: 100%;
}
.red{
    height: 100%;
    width:200px;
    display:inline-block;
    background-color: red;
}
.green{
    height: 100%;
    min-width:400px;
    display:inline-block;
    background-color:green;
}
.blue{
    height: 100%;
    width:400px;
    display:inline-block;
    background-color: blue;
}

此代码不会调整绿色div,在某些浏览器中红色面板不显示

我也试过float: left和

    display: -webkit-flex;
    display: flex;

但没有正常工作.这该怎么做？

我正在使用flexbox为一个站点搭建基本UI.与通常的电子邮件布局非常相似.

出于某种原因,第二个孩子(类.main-body,海藻绿柱,layouted Flexbox的容器的颜色)( .content-main,李子色)比其母公司,这一点我一个更大的高度不希望它.

我制作了一个codepen代码段来显示这种行为.

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}
.container {
  height: inherit;
  background: PeachPuff;
  padding: 1em;
  display: flex;
  max-height: 500px;
}
.sidebar {
  flex: 0 1 15%;
  background: khaki;
}
.content {
  flex: 1 1 auto;
  background: plum;
  padding: 0.8em;
  display: flex;
  flex-direction: column;
}
.content-header {
  background: lightgreen;
  padding: 0.3em;
  flex: 0 0 7%; …

我有一个300px宽的容器,里面有两个弯曲的div.
第二个是100px宽,另一个应占用剩余空间.
当我在第一个div中放置比剩余的200px更宽的文本时,它会溢出并且我可以使用overflow: hidden和text-overflow: ellipsis添加...文本溢出的时间.
当我h1在第一个div中放置一个标签并添加时overflow,text-overflow应该创建相同的效果.
它确实(在Chrome中),但在IE和Firefox中,div变大,省略号不起作用.
当我删除附加h1层并相应地更新css时,所描述的行为按预期工作.

或者看看我的JSFiddle

body{
    display: flex;
}

#container{
    display: flex;
    flex-basis: 300px;
    overflow: hidden;
}

#content{
    display: block;
    height: 300px;
    background-color: red;
    flex-grow: 1;
    flex-shrink: 1;
}

h1, h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#menu{
    display: flex;
    flex-grow: 0;
    height: 300px;
    background-color: blue;
    flex-shrink: 0;
}

<div id="container">
    <div id="content">
        <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1<h1> …

我正在使用flexbox构建布局,整体而言相当简单.视图有三个部分:顶部的导航栏,左侧的侧边栏和填充剩余空间的内容区域.导航栏具有固定高度,侧栏具有固定宽度.

此外,侧边栏和内容区域应单独滚动.如果侧边栏中的内容溢出,则应创建特定于侧边栏的滚动条.内容视图也是如此.重要的是,这意味着整个视口必须永远不会滚动:它应该保持静态(只有元素应该滚动).

使用flexbox构建此布局非常简单:

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
}

#root {
  display: flex;
  height: 100%;
}

#frame {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#navigation-bar {
  background-color: #bab;
  display: flex;
  height: 70px;
  overflow: hidden;
}

#main {
  display: flex;
  flex: 1;
}

#left-bar {
  background-color: #aaa;
  overflow: auto;
  width: 250px;
}

#content {
  background-color: #ccc;
  flex: 1;
}

<div id="root">
  <div id="frame">
    <div id="navigation-bar">
      <h1>Website Name</h1>
    </div>
    <div id="main">
      <div id="left-bar">
        <h1>Some …

我正在进行两列布局.两列都将显示iframe,两者的宽度将定义为CMS中的内联样式/设置.如果iframe小于列,则应垂直居中.如果它比柱大,它应缩小到柱的最大宽度,这几乎是50%宽.

(是的,这可能在不使用flexbox两次的情况下完成.但我对这些答案不感兴趣,因为我简化了示例和用例.)

示例:http: //jsbin.com/logifu/2/

HTML:

<div class="content">
  <div class="col">
    <div class="media-wrapper">
      <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width: 2000px; height: 2000px"></iframe>
    </div>
  </div>
  <div class="col">
    <div class="media-wrapper">
      <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width:200px"></iframe>
    </div>
  </div>
</div>

SCSS:

.content {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  height: 100%;
  min-width: 0; // this fixes the issue in FF 34

  + .col {
    margin-left: 40px;
  }
}

.media-wrapper {
  box-sizing: border-box; …

在chrome 47上(正确的行为): 在chrome 47上,div与.scroll正确滚动,使用flex取高度100%.

在Firefox上(错误的行为): 在Firefox上,该div .scroll使用内容高度而不是正确滚动.

什么是这个问题的跨浏览器解决方案？

http://jsfiddle.net/d4nkevee/

for (var i = 0; i < 100; i++)
  $(".scroll").append("Dynamic content<br>");

body,
html {
  margin: 0;
  padding: 0;
}
.container {
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  background: yellow;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.scroll {
  flex: 1 1 auto;
  overflow: scroll;
}

<div class="container">
  
  <div class="bar">Small</div>
  
  <div class="content">
    
    <div>Static content</div>
    <div class="scroll"></div>
    <div>Static content</div>
    
  </div>
  
  <div …