2

Wanted behavior: I would like the .container div to adjust to the width of the .chapers div which should adjust to the width of the .chapter-link divs. Both the .container and .btn divs should have the current height of the viewport (100vh).

Following this question I added justify-content and align-items : flex-start to the container, but the problem remains.

.container {
  background-color: blue;
  color: #fff;
  font-size: 16px;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.chapters {
  padding: 14px;
}

.btn {
  background-color: green;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-link {
  margin-bottom: .5em;
    max-width: 200px; 
}
<div class='container'>
  <div class='chapters'>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
  </div>
  <div class='btn'>&lt;</div>
</div>

Improve this question
4
  • issue with width or height ? Commented Feb 7, 2019 at 12:41
  • width, height works as expected. Commented Feb 7, 2019 at 12:41
  • 1
    in this case you need inline-flex... the alignment affect the cross axis not the main axis Commented Feb 7, 2019 at 12:42
  • thanks, that solved the problem. Feel free to write it us as an answer and I'll accept it. Commented Feb 7, 2019 at 12:55
Related questions
1133
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
769
What's the difference between align-content and align-items?
372
Fill remaining vertical space with CSS using display:flex
Load 3 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.