Question

我已经多次使用Flex没有问题，但我不明白为什么这不起作用。我已经将违规代码提取到一个新的HTML文件中，但它仍在发生。我有一个带有容器div的主体，它有一个旁边和一个部分。我的容器是显示：flex和方向是行。旁边设置为250px，我希望弯曲部分。它工作正常，直到我在我的部分添加一些

数据。

当我向它添加星座时，我的旁边有一个固定的宽度突然收缩。

type=text/javascript

div {
  width: 100%;
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

aside {
  position: relative;
  width: 250px;
  background-color: aqua;
}

section {
  position: relative;
  background-color: brown;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

非常感谢任何帮助！

Answer 1

为什么我的aside没有以指定的宽度显示？

因为flex-shrink默认为1，这意味着它可以缩小。

将flex-shrink: 0添加到其规则

div {
  width: 100%;
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

aside {
  position: relative;
  width: 250px;
  background-color: aqua;
  flex-shrink: 0;                    /*  added  */
}

section {
  position: relative;
  background-color: brown;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

<body>

  <div>
    <aside>
      <p>Some random data in a 250px wide div </p>
    </aside>
    <section>
      <p>
        To contribute to the reduction of the supply of controlled substances coming in to Orkney by the provision of a trained drugs dog or dogs. Helping to prevent access to harmful substances for the health benefit of the people of Orkney and neighbouring
        local authority areas.
      </p>

      <p>
        To work in partnership to increase public knowledge and to educate the community as to the extent of drug misuse, its damaging effects on individuals, families, society in general and the economy.
      </p>
    </section>
  </div>

</body>

为什么我的旁边不显示我指定的宽度？

1 个答案: