如何限制“flex”容器内的“pre”标签宽度？[副本]
如果将前标记放置在块布局和flex布局项中，则其行为似乎有所不同：
<div>
<pre style="background-color: green;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
</div>
<div style="display: flex;">
<pre style="background-color: blue;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
</div>
第一个pre（标有绿色背景）的大小由父div的宽度（页面宽度）决定。但是放置在flex容器中的第二个前似乎具有最大宽度，并且生成超过页面宽度的内容。只有当pre有很长的单词时才会发生这种情况。有什么方法可以正确限制第二个前的宽度，而不需要像显式指定它或通过overflow（溢出：隐藏的）删除超过的文本那样的黑客攻击？我已经尝试了空白：预包装；但它没有任何区别：（
共有2个答案
尝试空白：nowrap；文本溢出：省略号；溢出：隐藏；
似乎是一个著名的min宽度： 0问题。Flexbox为最小宽度的代码引入了新的自动代码值，它会做很多奇怪的事情。将它设置为前元素的0使其宽度符合预期。
-
问题内容： 标签标签没有属性’width’，那么我应该如何控制标签标签的宽度？ 问题答案： 当然，使用CSS … 不推荐使用该属性，并且应始终使用CSS来控制这些类型的表示样式。
-
法比安 示例图像
-
我试图使每个项目的宽度的基础上的内容，但我到目前为止设置的宽度所有的方式可用的空间。我做错了什么？ 目标是根据内容大小设置宽度。 目前 https://jsfiddle.net/v6cgLjbd/8/
-
将父flex容器宽度调整为子flex容器内容宽度时出现问题。 使用Bulma，我有以下HTML结构 但它最终应用于所有子flex容器，如您所见： http://codepen.io/anon/pen/mWqRxW 如何解决这个问题，并使父flex容器适合子flex容器的宽度（在本例中是输入的宽度）？
-
我有一个div里面有2个跨度。如果第一个跨距内容足够短，可以在单行上显示，则跨距宽度（在开发工具中）与文本内容的宽度相同。将第二个跨距直接定位在第一个跨距的右侧。 如果第一个跨距的内容足够长，可以使其环绕跨距的宽度，则该跨距的宽度将大于内容的宽度。这意味着在换行的文本后面有多余的空格。它强制第二个跨距与父div的右边框对齐，并强制第一个跨距的宽度获得剩余的宽度。 是否有一种方法可以使多行跨度的宽度
-
我有一个用于标题导航的Flexbox，徽标向左对齐，ul项目向右对齐，就像传统样式一样。徽标和导航链接都是全宽Flexbox中的flex项目，我给了它们两个flex:50%。导航链接部分也是一个Flexbox（内部Flexbox），用于防止菜单堆叠，而不是以更好的响应方式运行。 当我将“对齐内容”应用于该内部Flexbox时，链接没有任何更改，就好像存在替代样式或该属性在内部文本框上不起作用一样。