html - Flex 项目宽度无法减小，拉伸(stretch)至 100%

Question

不知道为什么，但我无法阻止红色按钮 100% 宽。我宁愿让它尽可能小，而不是拉伸(stretch)到 100% 宽度。我可以设置最大宽度，但如果按钮内的文本超过宽度，那就不好了。显示为 flex、block、inline-block 和 inline 不起作用 - flex shink 和 flex Growth 都不会变为 0。

实际上无法确定我做错了什么。有什么想法吗？

* {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
  font-size: 100%;
  box-sizing: border-box;
}
body { max-width: 1088px }

.divStyle6 {
  width: 100%;
  background: lightgreen;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}
.divStyle6 div { width: 50% }
.divStyle6 > div:first-of-type {
  background: url('https://www.encoreradio.co.uk/wp/wp-content/uploads/2018/08/mamma-mia.jpg');
  background-position: top center; /* in case wrong aspect ratio image provided */
  background-size: cover;
  padding-bottom: 25%; /* aspect ratio 2:1 */
}
.divStyle6 > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 3%;
}
.divStyle6 h3 { margin: 0 }
.divStyle6 a.button {
  color: #fff;
  background-color: #c43633;
  transition: all 0.3s ease;
  font-size: 12px;
  padding: 13px 25px;
  border: none;
  text-decoration: none;
}
.divStyle6 a.button:hover { background: #000 }

@media (max-width: 767px) {
  .divStyle6 { flex-direction: column }
  .divStyle6 div { width: 100% }
  .divStyle6 > div:first-of-type { padding-bottom: 50% }
  .divStyle6 > div:nth-of-type(2) { padding: 8% }
}

<!-- BOOTSTRAP Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="divStyle6">
  <div></div>
  <div>
    <h3>random text goes here</h3>
    <p>more random text here more random text here more random text here more random text here more random text here more random text here!</p>
    <a class='button' href='#'>Click here</a>
  </div>
</div>

Answer 1

将属性 align-items: flex-start 添加到您的类“.divStyle6”中。按钮将根据内容大小(文本)获取其宽度。