相关疑难解决方法(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> …

我正在尝试在包装器中嵌套两个子元素，该包装器指定侧边距，以便当显示狭窄时在其内容和屏幕侧面之间有一个空间，max-width而当显示较宽时则用于一个。

第二个孩子会有一些溢出，这应该是可见的，而第一个孩子应该严格位于包装器的内容框中。在删除第一个孩子的情况下，第二个孩子的行为符合预期。但是，当我添加第一个孩子时，它似乎完全忽略了包装器的边距，拉伸了包装器的内容框，并破坏了第二个孩子。

应用于overflow: hidden包装程序可以解决页边距问题，但可以裁剪第二个孩子。将边距应用于第一个孩子并不会使其与父对象一起折叠，因为它处于新的块格式上下文中。

到目前为止，我发现的唯一解决方法是：

.wrapper {
    > * {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

并将包装器的最大宽度增加3rem，但我希望有一些解决方案不需要我将包装器的边距转移到其子级。

https://codepen.io/HybridCore/pen/jjoWmd

.wrapper {
    > * {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

body {
  background-color: #000;
  color: #FFF;
  display: flex;
  justify-content: center;
}

.wrapper {
  margin: 0 1.5rem;
  max-width: 40rem;
  width: 100%;
}

.fit_content_box {
  display: flex;
  align-items: center;
}

.L {
  min-width: 0;
  flex: 1 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.R {
  margin-left: 1rem;
  height: …

在过去,我看到了下一个CSS,我在想是否存在一些实际的区别

min-width: 90px;
max-width: 90px;

和

width: 90px;

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.a-fc {
  background-color: purple;
  width: 300px;
  /*height: 100px;*/
}

.b-fc {
    background-color: orange;
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    flex-basis:70px;
    flex-grow:1;
}

.b-fc > * {
  flex-grow: 1;
  flex-basis: 100px;
}

.b-fc > *:nth-child(1) {
  background-color: red;
}

.b-fc > *:nth-child(2) {
  background-color: blue;
}

.b-fc > *:nth-child(3) {
  background-color: green;
}

<div class="wrapper">
  <div class="a-fc">
   <div>a1</div>
  </div>
  <div class="b-fc">
  <div>b1</div><div>b2</div><div>b3</div>
  </div>
</div>

FC = 弹性容器。FI = …

我正在尝试确定哪个 CSS 属性优先 - min-height 或 max-height - 以及这是否在浏览器之间保持一致。

例如，请考虑以下情况：

.class{
  min-height:600px;
  max-height: 50vh;
}

如果浏览器视口的高度为 1000 像素，则最小高度 (600 像素) 将大于最大高度 (50vh = 500 像素)。我知道这是一个轻微的悖论，但完全有可能并且很有可能（除了编码最佳实践）。

从测试中我可以看到，最小高度优先，即使元素最终超过了最大高度 - 即元素呈现为 600 像素高，即使最大高度为 500 像素；

这是预期的标准化行为吗？或者这是浏览器供应商可以解释的东西，并且可能因浏览器或设备而异。

您能给我解释一下这里的情况吗？（如果可能，请附上CSS规范的链接）

当我在＃grid-container（）上将flex-shrink设置为0时，出现了整个页面的滚动条flex: 1 0 auto

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
} …