align-items: center changing the width of a child element

Kopsie 0
Viewed 43

Somehow if I put items-center for the parent, a child element changes its width.

I use tailwind CSS.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col items-center">
    <div class="mx-5">
      <div class="flex max-w-xl mx-auto border-solid border border-slate-300/50 h-10 ">
        <input type="text" class="bg-inherit outline-none">
      </div>
    </div>
  </div>

tailwind-css css html
2 Answers

I am not sure what you mean by changes width? But I am going to guess you are trying to center the child? Flex box will only center an element if the element width is less than the parent width. See my snippet below. If the input is 100% width it won't center. If you are talking the child width changes it should as I am pretty sure that is what tailwind does for responsiveness.

.flex-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  height: 500px;
  border: 2px solid red;
}

.flex-wrapper div:nth-child(1) {
  background-color: orange;
  width: 200px;
}

.flex-wrapper div:nth-child(2) {
  background-color: lightgray;
  width: 100%;
}
<div class="flex-wrapper">
  <div>
    <span>One</span>
  </div>

  <div>
    <span>Two</span>
  </div>
</div>

OMGDrAcula0

You might want to try setting a default width. I once had a similar problem with align-items: center; and I fixed it by setting the width: 100px;. IDK if it will work in your case but it worked in mine.

PS: you might want to edit your question to make it clearer, it helps other people understand your problem better which leads to better solutions.

Emile Youssef FEGHALI EL0
Related