时间戳

首页 > 解决方案 > 具有 `max-width` 和 `max-height` 的 Flex 项目会导致其旁边的文本在 Chrome 中不必要地中断

css - 具有 `max-width` 和 `max-height` 的 Flex 项目会导致其旁边的文本在 Chrome 中不必要地中断

问题描述

在下面的代码片段中，tab__icon有 amax-width和 a max-height，但显然它会导致tab__label它旁边的文本中断，而实际上有足够的空间。

我知道这是两者的存在，这max-width导致max-height了这个问题，因为一旦您更改max-width为width或max-height，height文本不再中断，并且一切都按预期工作。

我在这里做错了什么？

我也尝试添加flex-shrink: 0;，tab__label但这会导致文本溢出父级，这不是我想要的。

.tab-list {
  display: flex;
  width: 100%;
  border: 2px solid red;
  justify-content: space-around;
}

.tab-list__item {
  flex-shrink: 0;
}

.tab {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: gray;
}

.tab__icon {
  max-width: 12px;
  max-height: 12px;
  flex-shrink: 0;
  margin-right: 5px;
}
<div class="tab-list">
  <div class="tab tab-list__item">
    <svg class="tab__icon" viewBox="0 0 11.25 15"> <g transform="translate(-3)"> <path d="M9.75,7.5A3.75,3.75,0,1,0,6,3.75,3.75,3.75,0,0,0,9.75,7.5Zm0-6.25a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,9.75,1.25Z" transform="translate(-1.125)"></path> <path d="M8.625,14A5.631,5.631,0,0,0,3,19.625a.625.625,0,1,0,1.25,0,4.375,4.375,0,1,1,8.75,0,.625.625,0,0,0,1.25,0A5.631,5.631,0,0,0,8.625,14Z" transform="translate(0 -5.25)"></path> </g> </svg>
    <span class="tab__label">Some title here</span>
  </div>
  
  <div class="tab tab-list__item">
    <svg class="tab__icon" viewBox="0 0 11.25 15"> <g transform="translate(-3)"> <path d="M9.75,7.5A3.75,3.75,0,1,0,6,3.75,3.75,3.75,0,0,0,9.75,7.5Zm0-6.25a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,9.75,1.25Z" transform="translate(-1.125)"></path> <path d="M8.625,14A5.631,5.631,0,0,0,3,19.625a.625.625,0,1,0,1.25,0,4.375,4.375,0,1,1,8.75,0,.625.625,0,0,0,1.25,0A5.631,5.631,0,0,0,8.625,14Z" transform="translate(0 -5.25)"></path> </g> </svg>
    <span class="tab__label">Some other title</span>
  </div>
</div>

更新：正如@TemaniAfif 在评论中指出的那样，这个问题只存在于 Chrome 中，Firefox 似乎按预期工作。

标签： cssflexbox

解决方案

由于您将宽度固定为最大值，因此您可以为宽度设置任何大于该值的值。至少，它应该可以在 Chrome 上运行，因为它在 Firefox 上已经很好了

.tab-list {
  display: flex;
  width: 100%;
  border: 2px solid red;
  justify-content: space-around;
}

.tab-list__item {
  flex-shrink: 0;
}

.tab {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: gray;
}

.tab__icon {
  max-width: 12px;
  max-height: 12px;
  flex-shrink: 0;
  margin-right: 5px;
  width:100px;
}
<div class="tab-list">
  <div class="tab tab-list__item">
    <svg class="tab__icon" viewBox="0 0 11.25 15"> <g transform="translate(-3)"> <path d="M9.75,7.5A3.75,3.75,0,1,0,6,3.75,3.75,3.75,0,0,0,9.75,7.5Zm0-6.25a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,9.75,1.25Z" transform="translate(-1.125)"></path> <path d="M8.625,14A5.631,5.631,0,0,0,3,19.625a.625.625,0,1,0,1.25,0,4.375,4.375,0,1,1,8.75,0,.625.625,0,0,0,1.25,0A5.631,5.631,0,0,0,8.625,14Z" transform="translate(0 -5.25)"></path> </g> </svg>
    <span class="tab__label">Some title here</span>
  </div>
  
  <div class="tab tab-list__item">
    <svg class="tab__icon" viewBox="0 0 11.25 15"> <g transform="translate(-3)"> <path d="M9.75,7.5A3.75,3.75,0,1,0,6,3.75,3.75,3.75,0,0,0,9.75,7.5Zm0-6.25a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,9.75,1.25Z" transform="translate(-1.125)"></path> <path d="M8.625,14A5.631,5.631,0,0,0,3,19.625a.625.625,0,1,0,1.25,0,4.375,4.375,0,1,1,8.75,0,.625.625,0,0,0,1.25,0A5.631,5.631,0,0,0,8.625,14Z" transform="translate(0 -5.25)"></path> </g> </svg>
    <span class="tab__label">Some other title</span>
  </div>
</div>

推荐阅读