使用纵横比时按钮溢出 flex 容器答案

【问题标题】：Button overflows flex container when aspect-ratio is used使用纵横比时按钮溢出 flex 容器
【发布时间】：2022-01-19 05:05:05
【问题描述】：

尝试将按钮放入 flex 容器并使其高度为兄弟 (.task) 高度的百分比。它按预期工作，除了按钮水平溢出父 (.task-buttons) 和祖先 (.task)。我不知道为什么会这样。

我希望.task-buttons 具有与其内容相同的宽度并适合.task，如果需要，可以缩小.task-todo。确切地说，.task-todo 作为其父级 (.task-info) 可能包含不应缩小的其他项目。

*,
::before,
::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 22px;
}

.container {
  position: relative;
  left: 30%;
  top: 50px;
  width: 40%;
  padding: 8px 16px;
  border-radius: 30px;
  box-shadow: 0px 1px 4px #00000029;
}

.task {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.task-info {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.task-todo {
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-buttons {
  display: flex;
  align-items: center;
  position: relative;
}

.task-inc-button {
  font-size: 18px;
  color: white;
  height: 80%;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background-color: #9BE0DB;
  cursor: pointer;
}

<div class="container">
  <div class="task">
    <div class="task-info">
      <div class="task-todo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis magna a sem posuere vestibulum.</div>
    </div>
    <div class="task-buttons">
        <button type="button" class="task-inc-button">+</button>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox responsive-design aspect-ratio

【解决方案1】：

在.task-inc-button CSS 中将aspect-ratio: 1; 替换为width: 20px;，希望对您有所帮助。谢谢你

*,
::before,
::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 22px;
}

.container {
  position: relative;
  left: 30%;
  top: 50px;
  width: 40%;
  padding: 8px 16px;
  border-radius: 30px;
  box-shadow: 0px 1px 4px #00000029;
}

.task {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.task-info {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.task-todo {
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-buttons {
  display: flex;
  align-items: center;
  position: relative;
}

.task-inc-button {
  font-size: 18px;
  color: white;
  height: 80%;
  border: none;
  border-radius: 50%;
  background-color: #9BE0DB;
  cursor: pointer;
  width: 20px;
}

<div class="container">
  <div class="task">
    <div class="task-info">
      <div class="task-todo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis magna a sem posuere vestibulum.</div>
    </div>
    <div class="task-buttons">
        <button type="button" class="task-inc-button">+</button>
    </div>
  </div>
</div>

【讨论】：

感谢您的回复！问题是如果左侧文本的字体大小发生变化，它应该缩放。