Question 415708 in Html Question posted in
Some basic documentation can be found here.

Html – Flexbox and max-width? Parent width is max-width when child is less wide

.row {
    display: flex;
    align-items: center; /* Centers items vertically */
    background-color: yellow;
    height: 100vh;
}

.column {
    max-width: 400px;
  background-color: red;
  flex-grow: 1;
}
<div class="row">
        <div class="column">Text</div>
</div>

Inside a flex box element I have a div with a max-width. Inside the div will be headings. Some headings are long, some short. Even with short headings I want the div to expand to the max-width (not shrink to the width of the child element). Is this possible without using breakpoints?

I’ve tried various combinations of max-width combined with width and min-width, but can’t get it to work

.row {
  display: flex;
  align-items: center
}

.column {
  max-width: 90rem;
  background-colour: red;
}



<div class="row">
  <div class="wrapper">
    <div class="column">Text</div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You have to maintain the hierarchy while targeting the child element.

    .row {
    display: flex;
  flex-wrap: wrap;
    align-items: center; /* Centers items vertically */
    background-color: yellow;
    height: 100vh;
}

.wrapper {
  width: 100%;
}

.column {
    max-width: 400px;
    width: 100%;
    background-color: red;
}
    <div class="row">
    <div class="wrapper">
        <div class="column">Text</div>
    </div>
</div>

    Also, flex-grow: 1 will result in same output.

    Login or Signup to reply.
  2. 0

    It’s because you use
    Flex-grow:1;,by using flex-grow only, its basis tends to be auto, for a flex item that has auto as its basis, it normally takes the width of the content in it. So advisely you use
    Flex-flow:1; then your max-width

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search