почему div не принимает ширину 90% от общей ширины?

Question

Не могли бы вы сказать мне, почему div не принимает ширину 90% от общей ширины? Когда я пишу так

  width: 90%;
  margin: 0 auto;

, он принимает ширину, но когда я пишу так, он не

display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

, вот мой код

https://codesandbox.io/s/bitter-dawn-o6rx2

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: "90%";
  /* // width: 90%;
  margin: 0 auto; */
`;

как центрировать форму по вертикали и горизонтали

Answer 1

Вам нужно изменить width: "90%"; на width: 90%;

Answer 2

Вы делаете все правильно, кроме одной строки:

Измените эту строку

width: "90%";

на эту

width: 90%;

Таким образом, ваш окончательный CSS будет

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%;
  margin: 0 auto; */
`;

Answer 3

CSS вашего стилизованного компонента Wrapper должен быть таким, как в примере ниже. Обратите внимание, что в вашем примере у вас двойные кавычки около 90%, что является недопустимым значением CSS. Это должно быть 90% без двойных кавычек, так как стилизованные компоненты используют обычный синтаксис CSS.

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%; //<=== here
  margin: 0 auto;
`;

, и вам нужно будет придать форме 100% ширины, если вы хотите, чтобы она использовала 100% оболочки

const StyledForm = styled.form`
width: 100%;
`

Answer 4

" after div -- style.div might create a problem ">

.testingWidth{
  display:flex;
  flex-basis:100%;
  width:90%;
  max-width:90%;
  min-width:90%;
  margin:0 auto;
  background-color:#CCAACC;
  min-height:10vh;
  padding:0.125em;
}

<div class="testingWidth">
styling with class.

</div>


<div style="display:flex;flex-basis:100%;width:90%;max-width:90%;min-width:90%;margin:0 auto;background-color:#CCC;min-height:10vh;padding:0.125em;">
styling without class.

<p>Do add flex-basis to your styling and check again.</p>
</div>