Why is my aside not showing at my specified width?

Question

I have used Flex several times with no problem, but I cannot see why this is not working. I have extracted the offending code to a new HTML file and it is still happening. I have a body with a container div which has an aside and section within it. my container is display: flex and direction is row. The aside is set as 250px and the section I want to be flex. It works fine right up until I add some

data in my section.

When I add sentances to it my aside with a fixed width suddenly shrinks.

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>

Any help very much appreciated!

Would `min-width: 250px;` or `flex: 1 0 250px;` on your `aside` work? — UncaughtTypeError, Oct 15 '17 at 15:43

score 0 · Accepted Answer · answered Oct 15 '17 at 15:52

Why is my aside not showing at my specified width?

Because flex-shrink is by default 1, which mean it is allowed to shrink.

Add flex-shrink: 0 to its rule

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>

oh gawd so it is! thanyou! I was getting all sweary this afternoon lol — Magnus Tullock, Oct 15 '17 at 17:05
@MagnusTullock Know the feeling...and for sure we've all been there :) — Asons, Oct 15 '17 at 17:06

Why is my aside not showing at my specified width?

1 Answers1