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

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 >
    <div >
      <div >
        <input type="text" >
      </div>
    </div>
  </div>

CodePudding user response：

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 >
  <div>
    <span>One</span>
  </div>

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

CodePudding user response：

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.