CODEWITHSUNDEEP
cssflexbox
paul seems
paul seems

Reputation: 565

Flex child to determind parent's width

I have a parent with a flex child :

.card {
  background-color: white;
  max-width: 80vw;
  height: auto;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 10;
  overflow: hidden;
  border-radius: 32.5vw;
  z-index: 100001;
}

.menusC {
  width: auto;
  height: auto;
  margin: auto;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: center;
  background-color: red;
}
<div class="card">
  <div class="menusC">
    <div class="menuBC">
      ......
    </div>
  </div>
</div>

As you can see my flex is inline-flex which means the flex get the size of its items. But the parent card insist to have it's own width (takes the max otherwise 100%). How would i make the card - be exactly at the width of the flex - menusC ?

Upvotes: 1

Views: 52

Answers (1)

Muhammad Asad
Muhammad Asad

Reputation: 3793

I have not seen what it looks like when the code is executed, but why has the parent got a fixed position with left and right set to 0?

This is telling it to go all the way from left to right.

Maybe change position: fixed to something else, or remove the left or right properties if fixed position is needed.

Upvotes: 1

Related Questions