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

我正在尝试使用一个svg元素,该元素在flexbox中使用容器大小调整大小,但由于某种原因,它会混淆svg下面的div(带文本)的大小.(调整浏览器窗口大小时会有多少更改)

以下是我用于所有这些的基本css属性:

[layout] {
    box-sizing: border-box;
    display: flex;
}

[layout=column] {
    flex-direction: column;
}

[layout=row] {
    flex-direction: row;
}

[flex] {
    box-sizing: border-box;
    flex: 1;
}

HTML:

<div class="content" style="height: 100%;" layout="row">

    <div class="card" layout="column" flex>
        <div class="toolbar" layout="column">
            <span>Test</span>
        </div>

        <div class="card-content" layout="column" flex>
            <div layout="column" flex>
                <div layout="column" flex>
                    <div layout="column" flex
                         style="background:green;">
                        <svg viewBox="0 0 50 50">
                            <circle r="25" cx="25" cy="25">
                        </svg>
                    </div>
                </div>
                <div>Text</div>
            </div>
        </div>
    </div>
</div>

Codepen: http ://codepen.io/anon/pen/rVJepm

如何在使用SVG时修复尺寸？