时间戳

首页 > 解决方案 > child max-width 强制父宽度

css - child max-width 强制父宽度

问题描述

我在将小图像放置在容器右侧时遇到问题。

由于某种原因，容器app-banniere-utilisateur__stand 正试图增加宽度，即使我添加了flex-grow: 0;

在搜索时，我发现img该容器中的标签实际上是在强制执行它max-width，就好像我写了width. （见 CSS 末尾的注释）

在代码片段上，我在不应该存在的额外宽度上添加了一个红色背景。
我不确定它是怎么发生的，关于如何解决这个问题的任何想法（除了修复 img 宽度，这不是重点）？

html {
  font-size: 16px;
  font-family: "PT Sans", sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.app-banniere-utilisateur {
  display: flex;
  flex-direction: row;
  height: 74px;
  padding: 6px 10px;
  max-width: 300px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar {
  border: 3px solid #aaaaaa;
  background-image: url(https://img-os-static.mihoyo.com/avatar/avatar22.png);
  background-size: cover;
  border-radius: 50%;
  margin: auto 10px auto 0;
  flex-shrink: 0;
  width: 60px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar.online {
  border-color: #54c242;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar:after {
  content: "";
  display: block;
  padding-top: 100%;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  padding: 3px 0;
  position: relative;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nom {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: auto;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav {
  background-color: white;
  bottom: -38px;
  color: #2196f3;
  display: flex;
  flex-direction: row;
  left: 0;
  width: 100%;
  position: absolute;
  transition: bottom 150ms;
  transition-timing-function: ease-in;
  z-index: 1;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i {
  font-size: 28px;
  margin-right: 8px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i:last-child {
  margin-right: 0;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand {
  background-color: red;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: right;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand img {
  max-height: 100%;
  /* max-width is pushing parent width */
  max-width: 80px;
}
.app-banniere-utilisateur:hover .app-banniere-utilisateur__info .app-banniere-utilisateur__info-nav {
  bottom: 0;
  transition: bottom 200ms;
  transition-timing-function: ease-in-out;
}

.app-banniere-utilisateur {
  border: 1px dashed;
  margin-bottom: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js" defer></script>
</head>

<body>
  <div class="app-banniere-utilisateur">
    <div class="app-banniere-utilisateur__avatar online"></div>
    <div class="app-banniere-utilisateur__info">
      <div class="app-banniere-utilisateur__info-nom">FirstName LastName</div>
      <div class="app-banniere-utilisateur__info-desc">Short user description</div>
      <div class="app-banniere-utilisateur__info-nav">
        <i class="material-icons">info</i>
        <i class="material-icons">message</i>
        <i class="material-icons">videocam</i>
      </div>
    </div>
    <div class="app-banniere-utilisateur__stand">
      <img src="https://i.pinimg.com/280x280_RS/35/7c/92/357c92d4bbd9b59bee2ef9d89d088f6d.jpg" alt="3D at Home">
    </div>
  </div>
</body>

</html>

标签： csssass

解决方案

推荐阅读