Properties applied with flex are lost when assigning width to the element

Question

Applying width to an element that has been centered horizontally and vertically using flex loses the properties applied by flex

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed lightblue;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 100vh;
  width: 200px; /* if comment this line the properties assigned by flex work properly */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

ul li {
  padding: 10px;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
  <button>Dark mode</button>
</header>
<main>
  <h1>Lorem ipsum dolor.</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
    dolorem aliquam amet impedit.
  </p>
</main>

What is the reason for this and how should this be implemented correctly?

Update

I get the desired result by modifying the html. I wrap the main content in a div and assign a fixed width to this div. Is it possible to do the same using only CSS?

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed lightblue;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px dashed tomato;
}

main div {
  width: 200px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

ul li {
  padding: 10px;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
  <button>Dark mode</button>
</header>
<main>
  <div>
    <h1>Lorem ipsum dolor.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
      dolorem aliquam amet impedit.
    </p>
  </div>
</main>

Thanks in advance

Can you elaborate what is you looking for? there are 3 flex you have been used. — Manjuboyz, May 08 '20 at 03:50
I need that the content inside main is centered vertically and horizontally and that it has a width that I define. If you remove or comment width in the main element, it works as expected. — Mario, May 08 '20 at 03:52
correct for Flex to work you have to provide the width, so changing the width:100%; will take care of the issue, am I missing anything apart from this? — Manjuboyz, May 08 '20 at 03:54
applying width to 100% does not solve my problem, I need main to have about 200px and consequently the content bounces inside it — Mario, May 08 '20 at 03:58
Ok, what is the expected behavior here on having width of 200px, what it should do — Manjuboyz, May 08 '20 at 03:59
I think it is working fine because when there is no extra space in the container in both horizontal and vertical side and it is not possible for its content to be centered. — Sandesh Sapkota, May 08 '20 at 04:14
I have managed to obtain the expected result by modifying the html and css a little. The content inside `main` I enclose in a `div` and I apply the css `width: 200px;` to this div. In the `main` css I remove `flex-direction: column;` By doing the above I managed to get the expected result. Thanks for your time — Mario, May 08 '20 at 04:38

score 1 · Answer 1 · answered May 08 '20 at 08:18

1

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 100vh;
  width: 200px;
  margin:auto; // Just need to add margin auto
}

answered May 08 '20 at 08:18

lakshitha madushan

669
4
7

score 0 · Answer 2 · answered May 08 '20 at 04:22

Instead of using fixed width you should use flex property.

like

.parent-element .child-element{ flex: 0 0 20em; }

flex is a shorthand property for it's ability to alter it's dimensions based on space.

You can look here for more details https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Properties applied with flex are lost when assigning width to the element

2 Answers2