Largura do elemento muda ao trocar o 'position' para 'fixed'

Front-end
,
#1

O elemento no qual eu preciso usar o position: fixed é o #menu. Usei flex no container #main para alinhar os elementos em row.

O #menu sem o position: fixed fica com cerca de 214px de largura; Com o position: fixed fica com 330px de largura, porém eu não altero a width do mesmo em momento algum.

HTML:

<div id="main">
    <div id="menu"></div>
    <div id="view"></div>
    <div id="other"></div>
</div>

css:

#main{
    display: flex;
    flex-direction: row;
    width: 65%;
    height: 100%;
    margin: 0 auto;
}
#menu{
    width: 20%;
}
#2

Normalmente o #menu tem 20% do tamanho do seu elemento pai, que no caso é #main.

Mas quando vc usa position:fixed, #menu é removido do fluxo normal do documento e passa a ter 20% do tamanho do viewport.

#3

Tem alguma forma de contornar isso?

#4

Eu pesquisei aqui, mas não encontrei nenhum jeito que não envolva JavaScript.

Mas se vc explicar o que vc quer fazer, talvez a gente encontre um jeito melhor. Seria bom se vc tive um desenho ou algo do tipo mostrando o resultado final esperado.

#5

Em vermelho: #menu
Em amarelo: #view
Em azul: #other

tw
tw.PNG1176×1010 14.7 KB

Tô fazendo um clone do twitter.
O objetivo é: ao rolar a tela, só a div em amarelo deve ser afetada. Usar overflow-y: scroll está fora de questão, pois o resultado não vai ficar bom e nem igual ao twitter verdadeiro.

#6

Então eu faria algo assim:

<div id="main">
  <div id="menu"></div>

  <div id="view">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Delectus sunt officiis quasi adipisci!</p>
    <p>Nobis voluptatem quisquam unde sunt!</p>
    <p>Explicabo natus dignissimos rerum hic.</p>
    <p>Quas maxime perspiciatis placeat temporibus.</p>
    <p>Reiciendis odit eligendi nobis tempore?</p>
    <p>Vero veniam et vitae voluptatum.</p>
    <p>Ad quibusdam natus excepturi reprehenderit.</p>
    <p>Vero quasi voluptatibus ut provident.</p>
    <p>Corrupti blanditiis id exercitationem consequuntur.</p>
    <p>Mollitia, error impedit. Temporibus, quo.</p>
    <p>Quam qui eaque placeat commodi.</p>
    <p>Accusantium aliquid eaque autem assumenda.</p>
    <p>Quis illo tenetur quia corrupti!</p>
    <p>Vel, odit unde? Earum, blanditiis.</p>
    <p>Quidem necessitatibus asperiores cum atque.</p>
    <p>Tenetur nesciunt aut maiores enim?</p>
    <p>Quam esse quae accusantium velit.</p>
    <p>Molestias repellat inventore repudiandae quos?</p>
    <p>Doloremque quo asperiores non eius.</p>
    <p>Harum praesentium dolorum iure quidem.</p>
    <p>A eos quia velit hic.</p>
    <p>Illo esse voluptatibus porro incidunt!</p>
    <p>Laboriosam necessitatibus architecto veniam sed?</p>
    <p>Maxime nobis perspiciatis ipsa aperiam.</p>
    <p>Distinctio dolorum veniam cum totam?</p>
    <p>Repudiandae eaque quod recusandae atque.</p>
    <p>Voluptatum ex quibusdam cum eligendi.</p>
    <p>Assumenda mollitia illo minus libero.</p>
    <p>Maxime eius doloremque voluptate corrupti!</p>
  </div>

  <div id="other"></div>
</div>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  #main {
    border: solid 5px aqua;
    height: 100%;
    box-sizing: border-box;
    display: flex;
  }

  #menu {
    border: solid 5px red;
    box-sizing: border-box;
    width: 300px;
  }

  #view {
    border: solid 5px yellow;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: auto;
  }

  #other {
    border: solid 5px blue;
    box-sizing: border-box;
    width: 300px;
  }

  #view p {
    border: solid 2px;
    padding: 20px;
  }
</style>