为什么我的旁边没有显示在我指定的宽度？

Question

我已经多次使用 Flex 没有问题，但我不明白为什么它不起作用。我已将有问题的代码提取到一个新的 HTML 文件中，但它仍在发生。我有一个带有容器 div 的主体，其中有一个 aside 和一个部分。我的容器是 display: flex，方向是 row。 aside 设置为 250px 和我想要弯曲的部分。在我在我的部分中添加一些

数据之前，它工作正常。

当我给它添加句子时，固定宽度的旁边突然缩小了。

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;
}

<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>

非常感谢任何帮助！

Answer 1

Why is my aside not showing at my specified width?

因为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>

为什么我的旁边没有显示在我指定的宽度？

Why is my aside not showing at my specified width?

html

css

flexbox

flex-grow