html - max-width 属性不适用于 flex 元素的子项

Question

我将 display:Flex 设置为 .container 元素。我把两个 child 放在了元素上。并将 max-width 赋予第二个 flex-Item 的子项 (.box)。但它似乎不起作用。

body {
  font-family: sans-serif
}

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}

.par {
  position: relative;
  margin-left: 7px
}

.round {
  height: 17px;
  width: 17px;
  background: #cacaca;
  border-radius: 50%
}

.box {
  padding: 10px 16px;
  box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
  position: absolute;
  font-size: 14px;
  color: #333;
  max-width: 200px;
  left: -11px;
  top: 28px;
}

.box::after {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  background: #fff;
  box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.17);
  transform: rotate(-137deg);
  top: -5px;
  left: 16px;
}

<div class="container">
  <div>Title</div>
  <div class="par">
    <div class="round"></div>
    <div class="box">This is a Paragraph Text</div>
  </div>
</div>

Js Fiddle Link

Answer 1

position: absolute 子级的宽度取决于它的 position: relative 父级。

在您的情况下，.box 的宽度取决于 .par 而 .par 太窄而无法包含“段落”一词.这就是为什么 .box 的宽度取决于内容中最长的单词。

我不认为你可以将动态宽度设置为 .box 同时不超过 200px 并保持 .par 的当前宽度.可能有 2 种方法可以解决您的问题。

1. 将 .par 设置为 width: 200px
2. 将固定的 width: 200px 设置为 .box