相关疑难解决方法(0)

为什么弹性项目不会缩小内容大小？

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

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

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

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

我不能用overflow-x: hidden.

.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
}

Run Code Online (Sandbox Code Playgroud)

<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> …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

tom*_*657

2019 02-26

247
推荐指数

2
解决办法

4万
查看次数

如何溢出:在弹性框内滚动

我已经构建了这个布局:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
html, body{
  margin:0;
  padding:0;
  height:100%;
}
.flex{
  display:flex;
  flex-direction:column;
  min-height:50%;
  width:33.3333%;
  float:left;
  border:1px solid #C8C7CC;
  box-sizing:border-box;
  overflow:scroll;
}
.flex:last-child{
  width:66.6666%;
}
</style>
</head>

<body>
<div class="flex">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
    </ul>
</div>
<div class="flex">

</div>
<div class="flex">

</div>
<div class="flex">

</div>
<div class="flex">

</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我想在每个弹性框内放置长列表.我需要它们单独滚动,同时填充浏览器窗口中的所有可用空间.我已经管理了后者,但是我怎么能得到一个弹性框来滚动而不是在溢出时增长？

html css flexbox

Dem*_*gen

2019 11-06

9
推荐指数

1
解决办法

2万
查看次数

Firefox中Flexbox中的垂直滚动渲染问题

我想在父项中包含一个flex项,以便它不会溢出父项之外.只有弹性项目应该有一个滚动条(如果需要).

我的样式在Chrome和IE11中运行良好,但不适用于Firefox.我怀疑在flex-basis设置的样式的解释上有所不同#wrapper,但我无法弄清楚为什么Firefox以不同的方式呈现.

这是Chrome中所需的渲染:

Chrome渲染截图

这是Firefox中发生的事情:

Firefox渲染截图

我可以通过添加来应用"胶带"修复#left { height: calc(100vh - 50px); },但如果可能的话,我更愿意确定实际的不一致性.

body, html, h1 {
  padding: 0;
  margin: 0;
}
header {
  background-color: rgba(0, 255, 255, 0.2);
  height: 50px;
}
#main {
  height: 100vh;
  background-color: rgba(0, 255, 255, 0.1);
  display: flex;
  flex-flow: column;
}
#wrapper {
  display: flex;
  flex-grow: 2;
  flex-basis: 0%;
}
#left {
  overflow-y: scroll;
  background-color: rgba(0, 255, 255, 0.2);
  width: 30%;
}
.box {
  margin: 5px 0;
  height: 50px;
  width: 100%; …

Run Code Online (Sandbox Code Playgroud)

html css firefox css3 flexbox

Joh*_*hnB

2016 03-13

7
推荐指数

1
解决办法

1450
查看次数