Css 当下一个Flex元素具有长文本时，Flex增长和Flex填充或收缩不起作用_Css_Twitter Bootstrap_Bootstrap 4_Flexbox

Css 当下一个Flex元素具有长文本时，Flex增长和Flex填充或收缩不起作用

css twitter-bootstrap bootstrap-4

Css 当下一个Flex元素具有长文本时，Flex增长和Flex填充或收缩不起作用,css,twitter-bootstrap,bootstrap-4,flexbox,Css,Twitter Bootstrap,Bootstrap 4,Flexbox,我希望色样填充CSS中设置的空间（宽度：40px），并缩小色样标签。但问题是：如果标签是一个像“玉米花蓝色”这样的长单词，则颜色样本的大小会缩小，而不会保持其宽度下面的HTML使用bootstrap4类。我已尝试将flex-fill和flex-grow-1添加到色样中，并将flex-shorn-1添加到色样标签中，但这些组合均无效下面是Codepen中的一个工作示例 .container{ 背景色：红色； } .侧边栏{ 宽度：280px；填充：1.5雷姆；背景色：#EFEF； }

我希望

色样

填充CSS中设置的空间（

宽度：40px

），并缩小色样标签。但问题是：如果标签是一个像“玉米花蓝色”这样的长单词，则颜色样本的大小会缩小，而不会保持其宽度

下面的HTML使用bootstrap4类。我已尝试将

flex-fill

和

flex-grow-1

添加到

色样

中，并将flex-shorn-1添加到

色样标签

中，但这些组合均无效

下面是Codepen中的一个工作示例

.container{
背景色：红色；
}
.侧边栏{
宽度：280px；
填充：1.5雷姆；
背景色：#EFEF；
}
li{列表样式类型：无；}
.色样{宽度：40px；高度：40px；}

样例上的引导类

d-flex

和

flex-grow-1

正在覆盖css样式

尝试删除这些选项，并根据需要调整样例和标签的大小。

样例上的引导类

d-flex

和

flex-grow-1

将覆盖css样式

试着删除它们，并根据需要调整样例和标签的大小。

您只是使用了错误的flex类组合

将

flex-grow-1

添加到色样中，并将

flex-shrink-1

添加到标签中，会告诉色样尽可能使用所有可用空间，如果可以，则会收缩标签。这不是你想要的行为。。。你真正想做的是告诉色样不要收缩

您可以使用

flex-shrink-0

类执行此操作。将此添加到所有

色样

元素将使它们保持40x40px，并让标签使用剩余的任何空间。您也不需要在色样或标签上使用

d-flex

：

<a class="d-flex align-items-center" href="#">
    <!-- Swatch -->
     <span class="color-swatch flex-shrink-0" style="background-color:black;"></span>
     <!-- Swatch Label -->
     <span class="stacked label ml-2">Black</span>
</a>